Skip to main content

I have an object which contains a lookup field to a skuid page. I’d like to create a deck on this model and include the skuidpage in each of the cards on the deck. However, it seems that skuid won’t allow the deck component to contain a page-include component.

Any thoughts on a way around this? Should I just hack the xml?

Use Case:
I have a salesforce object which contains Goals. Each Goal record has a lookup to a skuid page which amounts to a chart to track progress on that goal. I want to build a page which will automatically grab all of the active goals and show their charts in a responsive dashboard-like ui. The Deck seems like a great way to do this… if I could include a page. I would probably also need to run some javascript when each card is rendered. Is there a way to do that? Anyone have an idea here?

Are all goals rederencing the same skuid page with different URL parameters, or are there multiple Skuid pages involved.


Good question, Raymond.

Multiple skuid pages. I’m using a page include that generically points to a blank skuid page (called “BlankPageInclude”), and I set the page include to lazy load so it doesn’t load initially. Then with javascript I’m assigning the page name based on the lookup field in the Goal data, creating the querystring, and loading the include.


Turns out hacking the XML works just fine.


Matt,

This should be a feature request.

Thanks!

Bill


Did you just add the page include in the deck or did you have to do something fancy?


I just add the page include component inside the deck in the xml, then I can edit it with the builder. I set it to lazy load so it won’t load the include right away. Then I run some javascript (pasted below) on button press within each card to set the name and query string for the include and load it. Ideally, if I could tap in to the card load event (assuming there is one), I could do this without a button press.

snippet for button press:


var component = argumentst0].context.component,<br>&nbsp; &nbsp; indicatorRow = argumentst0].row,<br>&nbsp; &nbsp; indicator = indicatorRow &amp;&amp; indicatorRow.Id,<br>&nbsp; &nbsp; page = indicatorRow &amp;&amp; indicatorRow.Indicator_Dashboard_Page__r.Name,<br>&nbsp; &nbsp; goalRow = skuid.$M('SelectedGoal').getFirstRow(),<br>&nbsp; &nbsp; start = goalRow &amp;&amp; goalRow.Start_Date__c,<br>&nbsp; &nbsp; end = goalRow &amp;&amp; goalRow.Target_Date__c,<br>&nbsp; &nbsp; includeElement = component.element.next(), //get the page include element.<br>&nbsp; &nbsp; include = includeElement.data('object'),<br>&nbsp; &nbsp; $t = skuid.time;<br>start = $t.getSFDateTime($t.parseSFDate(start));<br>end = &nbsp;$t.getSFDateTime($t.parseSFDate(end));<br>include.pagename = page;<br>include.querystring = '?startdate=' + start + '&amp;enddate=' + end + '&amp;indicator=' + indicator;<br>include.load();



Very neat. Thanks for sharing!