Apex Code Development You need to sign in to do that
Don't have an account?
Nashle Pak My flow does not display correctly in my lightning application
Hi Aloha !
I created a super flow of death with flow builder here:
This flow works well is integrated perfectly in my organization with the lightning application generator, the proof in image:
I want to integrate my flow into an external site (third party). To do this, I have to use Lightning Out.
So I created a lightning component to embed my flow with the following code:
Obviously, I replace the value "myFlow" by the API name of my flow.
Puis, j'intégre mon flow à une application lightning pour le tester avec le code suivant :
"testFlow" is the name of my component.
You notice that I did not add Lightning Out dependencies voluntarily, to have a simple overview of my flow in a lightning application.
When I show my flow in with the Previous button of the console, my flow is like this:
Someone has an idea of the problem?
I created a super flow of death with flow builder here:
This flow works well is integrated perfectly in my organization with the lightning application generator, the proof in image:
I want to integrate my flow into an external site (third party). To do this, I have to use Lightning Out.
So I created a lightning component to embed my flow with the following code:
<aura:component>
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<lightning:flow aura:id="flowData" />
</aura:component>
and
({
init : function (component) {
// Find the component whose aura:id is "flowData"
var flow = component.find("flowData");
// In that component, start your flow. Reference the flow's API Name.
flow.startFlow("myFlow");
},
})
This code, I got it from the official salesforce documentation here: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_using_flow_cmp.htmObviously, I replace the value "myFlow" by the API name of my flow.
Puis, j'intégre mon flow à une application lightning pour le tester avec le code suivant :
<aura:application >
<c:testFlow/>
</aura:application>
"testFlow" is the name of my component.
You notice that I did not add Lightning Out dependencies voluntarily, to have a simple overview of my flow in a lightning application.
When I show my flow in with the Previous button of the console, my flow is like this:
Someone has an idea of the problem?
Greetings to you!
You need to extend force:slds in the application. The Salesforce Lightning Design System provides a look and feel that’s consistent with Lightning Experience. Your application automatically gets Lightning Design System styles and design tokens if it extends force:slds.
To extend force:slds:
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
All Answers
Greetings to you!
You need to extend force:slds in the application. The Salesforce Lightning Design System provides a look and feel that’s consistent with Lightning Experience. Your application automatically gets Lightning Design System styles and design tokens if it extends force:slds.
To extend force:slds:
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
Thank you Khan ;-)
If you also want to use 2 extends in your application such as ltng: outApp and force: slds, you are on the right page!
To start, bad news, you can not use 2 extends at the same time in a lightning container application.
So how did?
Add the extension ltng: outApp and for force: slds do not add it in extends!
And how do I add slds if I do not add it in the extends?
It's simple, to start download the resource static slds on the official website: https://www.lightningdesignsystem.com
At the time of writing, I downloaded version 2.8.3 because at the moment it is not possible to load later versions because of their weight which exceeds 5MB max which is possible to load as that static resource.
Then, in configuration, enter "static resources". Add your static resource to your organization, such as name SLDS283 and for visibility select "Public".
Now go back to your Lightning App and add this line of code:
<ltng:require styles="{!$Resource.SLDS283 + '/styles/salesforce-lightning-design-system.css'}" />Enjoy !