Millau problem: Components not loaded/rendered on page load

edited December 2017 in Problems
Hello Team, 

We recently upgraded skuid to Millau 11.01 version in our dev org. After installing Millau  page components such as table is not loaded on page load. This does happen 7 out of 10 page loads. Just wondering if all components are not loaded on page load (may be components are loaded asynchronously). Anyone else having this problem?

Gyan
Thank you.




Comments

  • Stephen SellsStephen Sells Member
    edited November 2017
    I haven't seen or heard of this yet. Would you mind giving some further context?

    Which version of Skuid did you upgrade from?
    Can you share any of the broken pages XML?
  • edited November 2017
    Hi Stephen, 

    We have upgraded form skuid version Brooklyn 9.6.11 to Millau 11.0 and then Millau 11.0.1. We are lodaing page include with JS like:

    skuid.$('#main-include').data('object').load() // main-include is uniqueId of page include component.


    In the included page I have added one inline javascript with few console logs:

    (function(skuid) {
    var $ = skuid.$;
    $(document.body).one('pageload', function() {
        console.log('searchbox.....'); // 
    console.log($('#searchResults')); // skuid table uniqueId
    console.log($('.searchbox')); // searchbox in skuid table

    });
    })(skuid);


    once the page include is loaded I can see both table and table searchbox on the UI. However, if I check console, $('#searchResults') & $('.searchbox') was not there on page load (lenght is 0: I will attach screenshots)

    Here's the page xml for the included page:

    <skuidpage unsavedchangeswarning="" personalizationmode="server" showsidebar="true" showheader="true" theme="PractiFI SPA Lightning">
        <models>
            <model id="SearchModel" limit="50" query="false" createrowifnonefound="false" type="" sobject="Contact" orderby="Name" datasource="salesforce">
                <actions/>
                <fields>
                    <field id="Name"/>
                    <field id="Email"/>
                    <field id="Birthdate"/>
                    <field id="MobilePhone"/>
                    <field id="Salutation"/>
                    <field id="Phone"/>
                    <field id="HomePhone"/>
                    <field id="OtherPhone"/>
                </fields>
                <conditions/>
            </model>
        </models>
        <components>
            <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="false" model="SearchModel" buttonposition="" mode="readonly" uniqueid="searchResults" emptysearchbehavior="query" searchplaceholdertext="Search..." allowscrollbars="false" floatheader="true" tablescrollheight="600px" cssclass="searchResults">
                <fields>
                    <field id="Name" hideable="true" uniqueid="fi-3-pA1F-278" valuehalign="" type=""/>
                    <field id="Birthdate" hideable="true" uniqueid="fi-3-pA1C-276"/>
                    <field id="Email" hideable="true" uniqueid="fi-3-pA1E-277" valuehalign="" type=""/>
                    <field id="HomePhone" hideable="true" uniqueid="fi-3-pA1G-279"/>
                    <field id="MobilePhone" hideable="true" uniqueid="fi-3-pA1H-280" valuehalign="" type=""/>
                </fields>
                <rowactions/>
                <massactions usefirstitemasdefault="true"/>
                <views>
                    <view type="standard"/>
                </views>
                <filters/>
                <searchfields usesosl="true" soslfields="All Fields"/>
                <actions defaultlabel="Global Actions" defaulticon="sk-icon-magic" usefirstitemasdefault="true"/>
                <renderconditions logictype="and"/>
            </skootable>
        </components>
        <resources>
            <labels/>
            <javascript>
                <jsitem location="inline" name="OnPageLoad" cachelocation="false" url="">(function(skuid) {
                    var $ = skuid.$;
                    $(document.body).one('pageload', function() {
                        console.log('searchbox.....'); // 
                    console.log($('#searchResults')); // skuid table uniqueId
                    console.log($('.searchbox')); // searchbox in skuid table
                   
                    });
                    })(skuid);</jsitem>
                </javascript>
                <css/>
                <actionsequences/>
            </resources>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </skuidpage>
    Hope this helps.

    Thanks 
    Gyan
    image
  • GyanGyan Member
    edited December 2017
    Another Millau issue : 'When Model saved action firing before model is saved. Anyone else having this issue?


  • Stephen SellsStephen Sells Member
    edited November 2017
    I was able to have the data load from the XML declaratively by clicking this checkbox:
    image

    What is your use case for not doing this declaratively?

    I haven't seen or heard of anyone reporting "When Model saved" action firing before model is saved. Do you have an example of this?
  • GyanGyan Member
    edited December 2017
    Hi Stephen, 

    I am not having issue with data load but issue with component load/render on page load i.e. $(document.body).one('pageload', function() {});.

    Here's is our use case, 

    We have our custom global search to search records. If search results is more than certain number (say 5) we display only 5 records on global search and 'View All Records' link to display all records. On clicking the 'View All Records' link we redirect to a list page and put the search string in the searchbox in the table of  the list page. 

    For example, if we are searching for string 'test' in our global search and if we have more than 5 contact records with name starts with test we get 'View All Records' link on clicking the link we redirect to seach-people list page (we don't check the box 'Query on page load' on purpose) and put search string 'test' in the table search on search-poeple page and trigger key-up event to force searching. 

    (function(skuid) {
    var $ = skuid.$;
    $(document.body).one('pageload', function() {         
    var searchTerm = pfi.ui.unpackState(pfi.ui.readState()).term;
    console.log(searchTerm); // this is will be test if search 'test' in our global search
    console.log($('.searchbox'));
    var searchModel = skuid.$M('SearchModel');
    $('.searchbox').val(searchTerm).trigger('keyup');

    });
    })(skuid);

    This was working fine before upgrading to Millau version. After upgrading to Millau more than 50% of the time it does not work. On our debugging we found that $('.searchbox') is not available most of the time and hence the question.

    So,
    Are all page components loaded on $(document.body).one('pageload', function() { }) event in Millau?
    If no, is there any particular event that we can listen to?
    If yes, is this a Millau bug?

    'search-people' is an example page only we are having this problem basically in every page where we are trying to access page components  with javascript/jquery.


    Regarding "When Model saved" action firing before model is saved issue I have created separate post here:
    https://community.skuid.com/skuid/topics/-when-model-saved-action-firing-before-model-is-saved?rfm=1...



  • GyanGyan Member
    edited December 2017
    Hi Stephen, 

    Any update on this?

    Thanks
    Gyan
  • edited December 2017
    Can I get an update on this please?


    Thanks
    Gyan
  • GyanGyan Member
    edited December 2017
    Hi, Any update on this? Gyan
  • Stephen SellsStephen Sells Member
    edited December 2017
    Have you tried using the Skuid Page: Rendered event that comes prebuilt in Millau to trigger your pageload stuff?

    See this for help: https://community.skuid.com/skuid/topics/is-it-possible-to-render-a-lightning-component-spinner-slds...
Sign In or Register to comment.