Forums

Customise ListView Data results Cancel

1. Chris Williams

   

   16 posts
   Registered:
   27 Jan 2020
   18 Feb 2020

   Link to this post

   Hello, We have a custom listview template . How do I access the data from this listview to place conditions on the value of the fields, if it isnt in a standard listview widget?. I.e. Logic will be placed on the value of the statuscode (below)  
     eg
   #if(statuscode){#
                  <span>#:statuscode#</span>
               #}#
   Thanks
2. Omar S

   

   51 posts
   Registered:
   04 Jul 2019
   19 Feb 2020 in reply to Chris Williams

   Link to this post

   Hi Chris
   
   Could you clarify what you mean by "if it isnt in a standard listview widget"? But this document may help you to access data from listview for now: 
   
   https://docs.telerik.com/kendo-ui/framework/templates/overview
   
   We've also written blog articles about the listview and other tips on using the TPC:
   
   https://www.crmportalconnector.com/blog/post/2019/01/10/how-to-create-different-templates-using-the-list-view-widget
   
   https://www.crmportalconnector.com/blog/post/2019/01/22/tips-and-tricks-for-beginners

   Last modified on 20 Feb 2020 14:02 by Omar S
3. Chris Williams

   

   16 posts
   Registered:
   27 Jan 2020
   25 Feb 2020 in reply to Omar S

   Link to this post

   Hi Omar,
   Sorry I meant it was a customised widget.
   I am still having trouble accessing the datasource through javascript on the page. I can access the datasource when looking through Chrome Dev tools, but not by the JS written into the page itself.
   Other widgets dont have this same issue. Why would that be? Have you got more examples of accessing the listview data source?
   Thanks Chris
4. Omar S

   

   51 posts
   Registered:
   04 Jul 2019
   Answered

   26 Feb 2020 in reply to Chris Williams

   Link to this post

   Hi Chris
   
   So as long as you load your fetch and the fetch contains the attributes you want, then data from the table/entity should be accessible. As a simple example, here is a fetch that retrieves the fullname attribute from the Contact entity: 
   
   <fetch version="1.0" output-format="xml-platform" mapping="logical">
     <entity name="contact">
       <attribute name="fullname" />
       <attribute name="contactid" />
       <order attribute="fullname" descending="false" />
     </entity>
   </fetch>
   
   In the custom listview editor, inside the list item I am able to access the fullname attribute and manipulate the UI doing the following:
               <li class="list-group-item d-flex justify-content-between align-items-center">
                    #if(fullname.includes("Chris")){#
                                   <span style="color: green">#: fullname #</span>
                               #}else{#
                                   <span style="color: pink">#: fullname #</span>
                               #}#
   
   If you are still having issues, please feel free to respond back with your fetch query, your js code placed inside the listview, and any console errors, You can also email us at
   
   support@crmportalconnector.com
   

   Last modified on 26 Feb 2020 22:02 by Omar S
5. Chris Williams

   

   16 posts
   Registered:
   27 Jan 2020
   26 Feb 2020 in reply to Omar S

   Link to this post

   Thanks Omar,
   Yes I have now added logic into the template, which works. I was attempting to add the javascript into a script widget and keep it all together, but this will do.
   Thanks
6. Omar S

   

   51 posts
   Registered:
   04 Jul 2019
   27 Feb 2020 in reply to Chris Williams

   Link to this post

   I see what you mean. To access the datasource after the listview has been rendered, you can do something like this inside the script widget; 
   
   tpc.page.TpcListViewModel.get_listView().dataSource.data()
   
   
7. Chris Williams

   

   16 posts
   Registered:
   27 Jan 2020
   02 Mar 2020 in reply to Omar S

   Link to this post

   Thanks Omar. The frustrating thing is, I can use this line to access the data from Chrome Dev tools but the same code retrieves a null-result from the javascript written in the page widget code.
   I do not know why this is.
   
8. Omar S

   

   51 posts
   Registered:
   04 Jul 2019
   02 Mar 2020 in reply to Chris Williams

   Link to this post

   Oh, that is frustrating indeed. I'm sorry I didn't understand that this was your issue. 
   
   But to answer your question, it's likely b/c your listview hasn't been generated before the JS code can take effect; so, the JS is calling on a non-existent datasource. Try nesting your code inside a tpc:ready event.  
   
   $(document).on("tpc:ready", function(){
     console.log("All TPC Widgets have been Initialized");
     tpc.page.TpcListViewModel.get_listView().dataSource.data()
   });
   
   resource:
   https://www.crmportalconnector.com/developer-network/documentation/portal-connector-widgets/tpc-client-side-api/mvc-based
9. Chris Williams

   

   16 posts
   Registered:
   27 Jan 2020
   02 Mar 2020 in reply to Omar S

   Link to this post

   Thanks Omar, unfortunately that didnt work either.
   
   $(document).on("tpc:ready", function(event, tpcObject){
   console.log("All TPC Widgets have been Initialized");
   
   console.log(event); //tpc:ready Event
   console.log(tpcObject); //TPC Window Object
     var notes = tpc.forms[0].notes;
   console.log(notes);
   var notesData = notes.get_listView().dataSource.data();
   var length = notesData.length;
   console.log(length);
   });
10. Patrick

    

    33 posts
    Registered:
    20 Apr 2020
    05 Aug 2020 in reply to Chris Williams

    Link to this post

    Hi Chris,
    
    My apologies for the late reply. Were you able to sort this out?
    
    Thanks,
    
    Patrick