Correct Way to Display Skuid Page In Lightning Component using OnClick Method?

  • 1
  • Question
  • Updated 4 months ago
  • Answered
Developing Lightning App and do not want to use the standard Skuid component initially on the page because it takes up entire page. We are presenting user with a series of icons in the app and then onclick it performs whatever action.

In the case where we want to open a Skuid page with the onclick, using the URL of the Skuid page in the Controller will work but seems like there is supposed to be a better way? I'm not a Java or really even a Lightning Developer but seems like can tackle this.

/* Lightning Component */
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">
    <figure>
 <img src="image.jpg; onclick="{!c.handleClickSkuidPage}"/> 
  <figcaption>Skuid Page</figcaption>      
    </figure>
</aura:component> 
/* Controller */
({
    handleClickSkuidPage: function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToURL").setParams({
            "url": "UglyHardCodedSkuidPageURL"
        }).fire();
    }
})
Photo of ddeveaux

ddeveaux

  • 1,202 Points 1k badge 2x thumb

Posted 4 months ago

  • 1
Photo of Peter Ogilvie

Peter Ogilvie

  • 370 Points 250 badge 2x thumb
Looks like a reasonable approach
Photo of ddeveaux

ddeveaux

  • 1,202 Points 1k badge 2x thumb
I ask because with Lightning seems to be a big move away from URL "redirects" when possible. So since Skuid was already native inside of Lightning thought there might be a preferred approach to referencing the Skuid page over the URL. I'm using the URL now and working fine, but wanted to use best practices if this wasn't it. Thanks!
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
Hi D,

Have you considered using the conditional rendering built into Skuid to show and hide components dynamically? You can add an on-click action to buttons, or Wrappers in the newest point release of Skuid 11.2, to toggle components (show/hide). It sounds like you're integrating Skuid with other Lightning components, so this might not be your first thought, but some ofwhat you're describing is pretty doable declaratively with Skuid components. 
Photo of ddeveaux

ddeveaux

  • 1,202 Points 1k badge 2x thumb
Thanks for message. For this question though, we would be starting with a Lightning component (image). Nothing to do with Skuid until the image is clicked. The image isn't part of Skuid. So don't think this solution would work in this case.
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
I think I understand what you're describing. Skuid can subscribe to events that your Lightning Components publish (see here). With that in mind, you can probably load the intended Skuid page, but wrap everything inside it in a Wrapper that's not rendered on pageload. Then, your other Lightning Component can fire off an event that the Skuid page is subscribed to. And finally, you can use the action framework to listen for that event, and fire off an action that would render your Wrapper (and all the page's contents within it).

Edit: if this option works for you, then it'll have the added benefit of pre-loading a good portion of the Skuid page, so that when it's rendered, it should happen pretty quickly.
(Edited)
Photo of ddeveaux

ddeveaux

  • 1,202 Points 1k badge 2x thumb
Ok thanks. We will play with this and the URL option. URL was much simpler to construct but your point on loading page faster is valid. Thanks!