Skip to main content

Does anyone know of an easy way to force the contents of a tab to reload every time you click on it? Here is the catch: the contents of the tab is a PageInclude component. Therefore, the Models it contains are not in the Parent Tab Page - otherwise I would just use Tab Actions to requery the model.


Here’s the setup:


Parent Tabbed Page - tab page with 3 tabs representing 3 Lead “Statuses” (Open, Working, & Qualified)


Child Page - Each tab includes a PageInclude component that loads the same page, but the tab filters the page condition via a Query String in the Page Include component.


How it works: When you click on the “Qualified” tab, it loads the Page Include and feeds the Query String to the “Filterable, Off by Default” Model Condition called “ProspectStatus”. So basically it only displays the Leads that are in the “Qualified” status. Clicking on the other 2 tabs (“Open” or “Working”) yields the proper results.


This is all working just fine.


Here is my problem (I’ll use a hypothetical situation):


  1. I load the page, which defaults to the “Open” tab. This displays my list of “Open” leads


  1. I can change the status of the Lead from “Open” to “Working” and click the “Save & Refresh” button


  1. After clicking the “Save & Refresh” button, it saves the model changes and queries the model. Which makes the Lead disappear from the “Open” tab (as intended).


  1. When I click on the “Working” tab, there is the Lead I just edited, right where it should be now that it is in the “Working” status. Sounds good, right? That’s what I thought…onto step 5.


  1. If I change the Lead status from “Working” back to “Open”, and “Save & Refresh”, my Lead is no longer visible in any of my tabs until I completely refresh the page.


  1. When I click back on “Open” it simply reloads the “Open” tab as it appeared in Step 3 above.


What I know is happening:



  • The Lead Status is successfully updating, that isn’t an issue




  • The Tab is rendering the contents the first time it loads, but it isn’t re-rendering the contents when I click on it subsequent times - only when I reload the entire page.

    What I’ve tried:




  • Creating an Action button that requeries the Model - doesn’t work




  • Creating a Tab Action that Queries the model when clicked - as mentioned earlier, the Model for the Lead objects is contained within the Child Page and not the Tab Page so that doesn’t work either



What I think might work but I keep getting an error:


This post https://community.skuid.com/t/reload-or-refresh-page-include seems promising but my javascript chops are very poor beyond cutting and pasting.


UPDATE!


As I was typing this, I realized I had left off the “#” from the snippet. It appears to be working using the inline snippet and then triggering the snippet as an action “whenever shown”.



Here is the content of the Snippet:



Now…the only thing that I’m not sure of is all of the errors that are popping up in the Console when this snippet triggers. To be clear: my page is now working as intended, but these errors make me nervous. Any help would be appreciated:



Should I just be happy that my page is working on not worry about those things in red?


Thanks!

Alternate option: Causing a page include to not render, then render will cause it to reload. So you could use the component rendering action (depending on your version of skuid) to force the component to not render (Hide) then a second action to render the component. This should reload the page include as expected.

Haha! Beat me to the punch. Exactly what I’d say.

Nice! That is a slick solution. I was running into a similar problem and this idea helped me solve it.

Great solution!!  Apparently I was absent from class the day we went over the “toggle component” action.  Works like a charm!

Here’s another approach, which is also a useful technique for running snippets with injecting parameters throughout skuid.  Start with this snippet (UpdatePageInclude):

var target = argumentsn0],
    content = argumentsm1],
    query = argumentsg2]
$ = skuid.$;

    var pageInclude = skuid.$(‘#’+target).data(‘object’);
        pageInclude.pagename = content;
        pageInclude.querystring = query;
        pageInclude.load();


Then in the action framework, add an action to Go to URL with the following link. Similarly you could use an onclick event in a template field or elsewhere with Row context and other creative uses:

javascript:skuid.snippet.getSnippet(‘UpdatePageInclude’)(‘IncludeRegion’,‘ContentPage’,‘LinkedEntityId={{$Model.YourModel.data.0.Id}}’);

So, does the toggle component (show) action do the same thing as skuid.$C(‘componentId’).render()?  If the component is already showing, seems like the show component action does not rerender the component, but if the sequence has a hide component action, followed by show component, it is rerendered.  Is that right?  Seems to be working this way with a page include, but just want to confirm.  Before toggle component was an option in the action framework, I was using a snippet to rerender components, but now thinking I should convert those to the toggle component hide/show actions to make things clearer for non-developers.

Hi

For the url:

javascript:skuid.snippet.getSnippet(‘UpdatePageInclude’)(‘IncludeRegion’,‘ContentPage’,‘LinkedEntityId={{$Model.YourModel.data.0.Id}}’);

If the page is PageA and the IncludePage is PageB, 
what values do we use for includeregion and content page (content is PageB?)  Thanks.

Any help?

In PageA you would have the Page Include component, and the Unique ID of that component would be the your first argument (The target variable).  That will default in with an autogenerated Id, which you can overwrite with something more readable.  That makes it a bit easier to work with, but you need to be careful about making sure it is unique across the rendered page.


The second argument will be the name of the Skuid page that you want to load in (your PageB).


Note that in more recent Skuid releases, this can all be done through the action framework rather than a snippet, which I’ve been super pleased with.

Hi John


Thank you for your advice.  Can you please elaborate on how this can be done via action framework instead of using snippet?  Thanks again.

In V2 pages, you use the “Run Component Action” action, and select a Page Include component, then you have the choice of re-loading the current page in the Page Include, loading a new page, or unloading the page that’s there already.

This is one of my favorite new features in V2.

I agree, John! Super powerful new feature. We have enjoyed the added flexibility with the new Page include component actions!

View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings