Hi! Is there a way to add a Visualforce Tab to the tabs section on a skuid page?

edited June 10, 2020 in Questions
Hi! Is there a way to add a Visualforce Tab to the tabs section on a skuid page? we want to add the Churnzero connected app as a tab on the account object

Comments

  • DaveDave ๐Ÿ’Ž
    edited June 3, 2020
    Hey David

    I've included VF pages on a skuid page using Template on a field editor (i remember trying on template component instead of field editor and it did not work as well, but maybe it's changed that was years ago)

    Examples:

    <iframe scrolling="no"ย  src="/apex/LTATW__LTATW_Account?Id={{{AccountId}}}&isdtp=vw" width="100%" height="70px" frameborder="0"/>

    or

    <div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;">
    <iframe scrolling="no" src="/apex/zeitzone__ContactAddressTime?Id={{{Id}}}&isdtp=vw" style="border: 0px none; margin-left: -3px; height: 98px; margin-top: -44px; width: 250px;">
    </iframe>
    </div>

    Hope that helps!


  • Rob HatchRob Hatch ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
    edited June 3, 2020
    There is a page API Wrinkle here.ย 

    1. If using a V1 page - Dave is correct.ย  Template with the iframe code....ย  (Just remember to make sure the template is connected to a model so the merge sytax actually connects to data.ย 

    2. If using a V2 page - you need to use a TEXT component and put the iframe code in the "advanced" property.ย  Its currently the only place you can inject the HTML into the skuid page.ย  That will be changing,ย  but for now - that is what you have to do.ย 
  • DaveDave ๐Ÿ’Ž
    edited June 3, 2020
    Oh, ya for some reason assumed you were on V1, thx Rob now I know for V2 as well!

    And, shameless self-promotion ;-),ย  Rob if you are not too busy any chance you can help me with my recent post?
  • edited June 3, 2020
    I tried adding this

    <apex:page standardController="Account"><apex:canvasApp developerName="ChurnZeroConnectedApp_Ncontracts"/>
    </apex:page>

    to the template as you mentioned but it didn't work, let me show you.image
  • Rob HatchRob Hatch ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
    edited June 3, 2020
    Have it up right now...

  • edited June 3, 2020
    So how do I know if my pages are V1 or V2?
  • DaveDave ๐Ÿ’Ž
    edited June 3, 2020
    From Screenshot you provided seems to me you are on V1

    But one of the way to check , is the page properties of your page in the page builder or your Skuid page List
  • DaveDave ๐Ÿ’Ž
    edited June 3, 2020
    Can you provide the Name of the Visual Force Page and The NameSpace Prefix? (you can find those info on the visualforce page for SF)

    As well is this VF page expect the record ID from Account?
  • edited June 3, 2020
    This is the VF Page. What would be the code I need to add to the template so that this Churn Zero VF page shows when you click on the tab?
    image
  • DaveDave ๐Ÿ’Ž
    edited June 3, 2020
    Try this, in your skuid page:

    Add a Field Editor Component
    Relate it to proper model (account?) make sure Record ID is included in your model
    go to Add Fields on that Field Editor, and choose template

    In template add this

    <iframe scrolling="no" src="/apex/Churn_Zero?Id={{{Id}}}&isdtp=vw"ย width="100%" height="70px" frameborder="0"/>

    Save and preview


  • edited June 3, 2020
    I feel like we are so close! It gives me a link to the churn zero profile view, but is there a way to actually see that second page from the skuid tab instead of clicking on the link?
    and thank you so much for the help y the way..

    imageimage
  • DaveDave ๐Ÿ’Ž
    edited June 3, 2020
    the whole VF page is there it seems(i see scroll bars), change the height in the code for template
    I have it very small at 70, try 600 and adjust as needed

    <iframe scrolling="no" src="/apex/Churn_Zero?Id={{{Id}}}&isdtp=vw"ย width="100%" height="600px" frameborder="0"/>
  • Rob HatchRob Hatch ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
    edited June 3, 2020
    Thanks Dave!ย 

  • edited June 3, 2020
    This is great!! yall are awesome :)

    Is there any way to center it so that it takes up the whole page? I did 200% but it just makes it bigger to the right side..ย  it seems as its two columns kind of.
    image
  • Rob HatchRob Hatch ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
    edited June 3, 2020
    You've got the template in a field editor that is configured to have labels left.ย  Set the label on top and your iframe can go full screen.ย 
    Add a space character to the label for the field and you can get rid of the label entirely.ย 
  • DaveDave ๐Ÿ’Ž
    edited June 3, 2020
    Rob beat me to it :D

    A pleasure! Welcome to Skuid, the best app out there for Salesforce and Now all Platforms!




  • edited June 3, 2020
    It worked in lightning!! but it gave me an error in classic
    imageimage
  • Rob HatchRob Hatch ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
    edited June 3, 2020
    Fascinating.ย  ย  In classic you need to use the visualforce namspace prefix in your URL.ย  ย Its " c__ ".ย  ย Not suprized that in Lightning the base VF prefix isn't needed.ย  Maybe it won't break if its there and you can use the same page in both places...ย  Here is hoping .ย 

    <iframe scrolling="no" src="/apex/c__Churn_Zero?Id={{{Id}}}&isdtp=vw"ย width="100%" height="600px" frameborder="0"/>
  • edited June 3, 2020
    It is working now in classic as well!! woot woot! I really appreciate the help!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!