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

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">
 <img src="image.jpg; onclick="{!c.handleClickSkuidPage}"/> 
  <figcaption>Skuid Page</figcaption>      
/* Controller */
    handleClickSkuidPage: function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToURL").setParams({
            "url": "UglyHardCodedSkuidPageURL"

Looks like a reasonable approach

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!

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. 

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.

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.

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!