7

I have a static site, hosted in a AWS S3 bucket. The static site uses Lightning Out to load a component that contains a flow. I have included the SLDS stylesheet in the static site, and have confirmed it loads correctly. It looks like everything in the actual lightning component is styled correctly and the SLDS stylesheet is doing its job. However, when a flow is loaded in the component the content comes through unstyled.

Here is the static site:

<html>
    <head>
        <script src="[MY_SANDBOX]/lightning/lightning.out.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jsforce/1.7.0/jsforce.min.js"></script>
    </head>
    <body>
        <button onclick="login()">Login</button>
    <script>
        jsforce.browser.init({
            loginUrl : 'https://test.salesforce.com',
            clientId: '[    MY_CLIENT_ID    ]',
            redirectUri: '[ MY_REDIRECT ]'
        });
        function login(){
            jsforce.browser.login();
        }
        jsforce.browser.on('connect', function(conn) {
            if(conn.accessToken && jsforce.browser.isLoggedIn()){
                $Lightning.use("c:DEPENDENCY_APP", function() {
                    $Lightning.createComponent("c:CONTAINER_COMPONENT",
                    {},
                    "lightningout",
                    function(cmp) {
                        //nothing yet
                    });
                },
                'https://[MY_URL].lightning.force.com', 
                conn.accessToken 
                );
            }
        });
    </script>
        <div class="slds-scope">
            <div id="lightningout">
            </div>
        </div>
    </body>
</html>

The component that holds the flow looks like this:

<div aura:id="newBidContainer" class="slds-scope">
    <lightning:flow title="" aura:id="newBidFlow" onstatuschange="{!c.handleNewBidStatusChange}" class="slds-scope" />
</div>

As you can see, I have tried to force slds-scope in every parent div that will hold the flow. I have also included it in the class="slds-scope" parameter on the lightning:flow directive.

This is what the flow looks like in salesforce:

enter image description here

And this is what it looks like in the static site:

enter image description here

  • Probably you should try directly adding the SLDS static resources to your page, like the downloaded file from here, lightningdesignsystem.com/assets/downloads/… – zuke Feb 23 '18 at 22:12
  • @zuke I have included the SLDS stylesheet in the static site - that's exactly what I did. I have also verified that the SLDS stylesheet is loading correctly. – Ross Bassett Feb 26 '18 at 14:00
0

Per the cloud flow guide, "Flows that run from a Visualforce component always use Classic runtime."

https://developer.salesforce.com/docs/atlas.en-us.salesforce_vpm_guide.meta/salesforce_vpm_guide/vpm_admin_runtime.htm

The best option is to grab the styles from App.css in context of the flow in lightning and apply them to your component either in the style component or via a static resource: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/apps_css_external_platform.htm

  • good catch. salesforce support (multiple tickets) never even caught that. – Ross Bassett Dec 6 '18 at 21:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.