How to force a Page Include to reload inside a tab?

edited June 25, 2020 in Questions
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

image

2.  I can change the status of the Lead from "Open" to "Working" and click the "Save & Refresh" button

image

3.  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).
 
image


4.  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.


image


5.  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.

image


6.  When I click back on "Open" it simply reloads the "Open" tab as it appeared in Step 3 above.

image




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/skuid/topics/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".

image

Here is the content of the Snippet:

image



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:


image


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

Thanks!

Comments

  • edited June 25, 2020
    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.
  • Pat VachonPat Vachon 💎💎💎
    edited November 28, 2017
    Haha! Beat me to the punch. Exactly what I'd say.
  • edited November 28, 2017
    Nice! That is a slick solution. I was running into a similar problem and this idea helped me solve it.
  • edited November 28, 2017
    Great solution!!  Apparently I was absent from class the day we went over the "toggle component" action.  Works like a charm!
  • John DahlbergJohn Dahlberg ✭✭✭✭
    edited July 12, 2019
    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 = arguments[0],
        content = arguments[1],
        query = arguments[2]
    $ = 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}}');

  • edited April 7, 2018
    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.
  • edited September 17, 2019
    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.
  • edited September 18, 2019
    Any help?
  • John DahlbergJohn Dahlberg ✭✭✭✭
    edited September 18, 2019
    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.
  • edited September 19, 2019
    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.
  • Zach McElrathZach McElrath Principal Software Engineer Chattanooga, TN 💎💎💎
    edited September 18, 2019
    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.
  • John DahlbergJohn Dahlberg ✭✭✭✭
    edited September 19, 2019
    This is one of my favorite new features in V2.
  • Clark CreggClark Cregg ✭✭✭
    edited September 19, 2019
    I agree, John! Super powerful new feature. We have enjoyed the added flexibility with the new Page include component actions!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!