Tips for deploying pages in Lightning?

  • 3
  • Question
  • Updated 2 months ago
  • Answered
  • (Edited)
I've spent a bit of time today trying out different deployment scenarios for a new Skuid implementation, and I want to use the the Lightning framework as much as possible. Are there any tips that people have for deploying pages to Lightning users?

This is what I've tried so far for a RECORD DETAIL page (only the first option has successfully worked and I haven't tried a tab page yet):

1. Embed the skuid page in a lightning component, and then deploy that component via the Lightning Page Builder (still in pilot mode).
  • This requires a Lightning component with the following syntax: 
<aura:component implements="force:hasRecordId,flexipage:availableForRecordHome" access="global">    
<skuid:page page="CharterDetail" id="{!v.recordId}" />
</aura:component>
This was the only way I could get the standard skuid model condition "Id = (param) id" to recognise the id parameter contained in the page, as the standard lightning url doesn't contain an id parameter.

This method works pretty well, but the page load is kinda slow (5-10 seconds)


2. Tried deploying the a skuid page directly from the Lightning Page builder, whereby the app builder allows you to specify parameters that should be passed to the page. This gave me lots of errors similar to those in the post here. (I ignored most of these and was still able to achieve a few things). The only way I could get this method to work was by hard-coding the record id into the skuid page. This is fine for testing but I couldn't get it to dynamically recognise the parameters contained in the page.





3. Another method might be to deploy the Skuid page inside a Visualforce page, and then deploy that page using the visualforce lightning component. 






So....the real question here is - whats the best way to go about deploying Skuid pages to Lightning users?

And...are there potentially going to be huge changes coming with the next Salesforce release that will significantly impact anything deployed in Lightning currently? 
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb

Posted 3 years ago

  • 3
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
I recommend using option 1, the way you're doing it right now. Think of it as a rough equivalent to doing Visualforce override pages.

We're hoping to get more answers to why Lightning App Builder has been so buggy for customers when trying to use Skuid within it, as this would eliminate the need to create as many "override" Lightning Components.
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb
Hi Zach, thanks for the feedback. I did some more testing with Option 1 and it works ok but page loads are just too slow (10 seconds++). I highly doubt this is a Skuid issue and much more likely a lightning issue.

For now I've gone with the old VF override method - the trick was capturing the record id parameter as Lightning doesn't pass it into the url in the same way - I've been able to deploy the skuid page in VF and capture the id like this:
<apex:page standardController="Charter__c" showHeader="false" 
sidebar="false" readonly="true" docType="html-5.0">    
<apex:variable value="{!$CurrentPage.parameters.id}" var="recordId"/>
    <skuid:page page="CharterDetail" id="recordId"/>
</apex:page>
The page is now loading MUCH faster in lightning in line with what users are expecting. It will probably need to be revised once more lightning deployment options become available but seems to work nicely for now.

Can you see any issues deploying with a VF override using the above page?
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb
Odd...the vf page syntax seems to be working now without the need to capture the id parameter as an apex variable, so back to the standard deployment method:

<apex:page standardController="Charter__c" showHeader="false" sidebar="false" readonly="true"  docType="html-5.0" extensions="skuid.Redirects" action="{!IF(canUseSkuid,'',redirect)}">
    <skuid:page objectType="Charter__c" actionType="View"/>
</apex:page>
Photo of Josh Cutler

Josh Cutler, Official Rep

  • 864 Points 500 badge 2x thumb
Just thought I'd chime in with some of my own experiences...

Objective: show a Skuid page within a Lightning Record page. The Skuid page has a model condition that accepts the id of the Page/URL parameter value (from the Lightning record in context).

Like Greg, I had no luck using the Skuid component (listed in the Lightning App Builder under the Custom - Managed component section). 

I, also, had to create a custom Lightning component with an embedded Skuid page to get the results I wanted.

1. In your org, open the Developer Console and create a new Lightning Component.

2. Copy and paste the following code into the console:

<aura:component implements="force:hasRecordId,flexipage:availableForRecordHome" access="global">
    <skuid:page page="EnterYourSkuidPageNameHere" id="{!v.recordId}"/>
</aura:component>
You'll have to manually enter the name of your Skuid page.

Save your new component!

3. After refreshing the Lightning App Builder, you should see your Lightning component listed under the Custom heading in the component list. Add it to your Lightning page! Save and Activate!

Note: to get the record in context, the "force:hasRecordId" part is crucial! See here for details: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app...

The "flexipage:availableForRecordPage" piece limits where this custom component will be displayed. It will only be listed on Lightning record pages, not Home or Custom pages. See the above link for more information.

Important: make sure the Id field is added to the model of your Skuid page! If you don't add the field, then your custom component will not work. I often get by without adding the Id field because Skuid generally assumes it's presence, but it must be added for this configuration to work.



You get all the power and multi-model flexibility of a Skuid page within a Lightning page!
(Edited)
Photo of Stephen Chan

Stephen Chan

  • 956 Points 500 badge 2x thumb
Sadly I have to report that having Skuid working nicely with Lightning without using Visualforce still does not work for us even with the new Brooklyn release :-(

I was keen to see the new Lightning Design theme looking seamless within a Lightning Page, Lightning App and Salesforce1 but no luck. I followed all the steps (MyDomain, deactivate LockerService) and tried both managed and custom component but I get different Skuid javascript errors like:
Unfortunately, there was a problem. Please try again. If the problem continues, get in touch with your administrator with the error ID shown here and any other related details. Uncaught TypeError: Cannot read property 'getDefaultDataSourceName' of undefined throws at https://mytest--skuid.lightning.force.com/resource/skuid__SkuidJS:7:7664
Would really like to see this working as we are evaluating Lightning and Skuid and wanting to recommend to our execs/managers that we can move from classic+VF into Lightning+Skuid but are having issues getting either to work well (preferably without code) and that's not even considering page loading experience which is generally slow for Lightning and so Skuid suffers too. Any good news on this front going forward would be much appreciated!
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
I received this error just moments ago and unsure what to do when trying to create a lightning component and the Skuid Page within the Lightning app builder: 


Unfortunately, there was a problem. Please try again. If the problem continues, get in touch with your administrator with the error ID shown here and any other related details. Uncaught TypeError: Cannot read property 'themeBuilder' of undefined throws at https://companyname.lightning.force.c...
Photo of Joseph Ucuzoglu

Joseph Ucuzoglu

  • 1,074 Points 1k badge 2x thumb
I got this as well just now when  trying to follow the directions posted on the SKUID site.

Did you find a solution for this by chance?
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
Hey Joseph, The solution provided was to use skuids Actions with a pop up button for what I was trying to do: new leads with record types and new accounts with record types. Works pretty good and even stylized it with css, etc. 
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
I've read through this post and the lightning guide here: https://docs.skuid.com/latest/en/skuid/deploy/salesforce/using-skuid-lightning.html

What about page assignments? We have a customer with 10 different detail pages with page assignments showing 10 different Skuid pages. It looks like the custom lightning component you have to specify the Skuid page. How would we replicate the functionality of the VF component? i.e.:

<skuid:page objecttype="Account" actiontype="View" />  
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 10,826 Points 10k badge 2x thumb
Issue is related, but question is separate, so we'd like to keep the conversations as clear as possible.

Please reference the new conversation here: Managing Page Assignments With Skuid on Lightning
Photo of Randy Ott

Randy Ott

  • 80 Points 75 badge 2x thumb
We are a "lightning only" org evaluating SKUID. This is a bit of an issue for us as well.  The only option I have been able to get working is #3 - the worst option IMO since Salesforce wraps the Skuid page in an ugly container with a title I can't remove.  When trying option #1 (the second best option)I get the following error message in the page builder:

 Uncaught TypeError: Cannot read property 'themeBuilder' of undefined
Option 2 - the best option - does not seem to work at all.  Any advice or help would be appreciated.
Photo of Rebecca Vanderslice

Rebecca Vanderslice

  • 376 Points 250 badge 2x thumb
does this still have to be in a visualforce page? I am trying to put a Skuid page within a tab in the lightning record detail page and the model is not receiving the record id.
Photo of Zach McElrath

Zach McElrath, Employee

  • 48,632 Points 20k badge 2x thumb
No, you do NOT have to use Skuid in Visualforce Page to use Skuid within Lightning Experience - you should be able to use the "Skuid Page" Lightning Component.

By default, if you are in a "Record Detail" Lightning Page, Skuid will be aware of the context 'Record Id' and will send this in to your Skuid Page via the "id" parameter, which you can use within Model Conditions just like you would in Visualforce.
Photo of Rebecca Vanderslice

Rebecca Vanderslice

  • 376 Points 250 badge 2x thumb
thanks Zach! for some reason it's not working for me.  I see my Skuid page displaying but the fields are not showing in the field editor so it looks like the model has no data. I did use the "id" parameter the condition on my model already for Account. I can put in a support ticket though and see if they can help.
Photo of Zach McElrath

Zach McElrath, Employee

  • 48,632 Points 20k badge 2x thumb
Hmm --- yeah I'd put in a support ticket. What version of Skuid are you running?
Photo of Michael Barnes

Michael Barnes

  • 180 Points 100 badge 2x thumb
I'm having the same problem.  Putting in a support ticket now.  Trying to move away from Visualforce where feasible, but will resort to that if needed.