Embed a simple list widget

[brittany_sorrel]

Hi all,

I'm looking to embed a simple list widget in a tabbed view on a page.

This is what I have currently for the HTML of the widget.

       <uib-tabset active="activeForm">
           <uib-tab index="0" heading="Incident">
               <div class="row">
                   <div class="col-md-1"></div>
                 <div class="col-md-4"> <sp-widget id="a" widget="data.simpleList1" options='data.listOpt1' >TEST</sp-widget> </div>
                   <div class="col-md-2"></div>
                 <div class="col-md-4"> <!-- second widget goes here --> </div>
                   <div class="col-md-1"></div>
               </div>
               <div class="row">
               </div>
           </uib-tab>
           <uib-tab index="1" heading="Change Management">
               <!-- change request lists -->
           </uib-tab>
       </uib-tabset>

Here is the server side javascript to call the widget and its options.

data.simpleList1 = $sp.getWidget("widget-simple-list");
data.listOpt1 = {
   "secondary_fields":{
   "value":"u_incident_title",
   "displayValue":"u_incident_title"
   },
   "always_show":{
   "value":"true"
   }
};

I haven't been able to find any documentation regarding how to pass over data that is part of the widget instance information. For example in the simple list widget there are the fields "table" and "filter" which allow the user to select a table and apply a query to the table. Rather straight forward, but passing over these items when embedding the widget is proving rather difficult.

Any assistance would be greatly appreciated!

Thanks,

Britt Sorrell

[brittany_sorrel · Accepted solution]

After some trial and error got the following to populate the simple list widget.

Change to the html code:

<widget id="widget-simple-list" options="data.listOpt1" >TEST</widget>

Change to the server code:

data.listOpt1 = {
   "secondary_fields":"u_incident_title",
   "always_show":"true",
   "table":"incident",
   "filter":"",
   "display_field":"number",
   "maximum_entries":"5"
   };

I had been under the impression that the options that could be passed were limited to what is within the "Additional options, JSON format" field on the widget instance. Found out that is not the case, it can be by the looks any field that is on the widget instance form.

[Community Alums]

Hi Brittany,

This is awesome! thanks for sharing..

one issue i'm facing while embedding same widget (widget-simple-list) with multiple tabs, data is not segregated. I mean, when i use the same widget with multiple json data for incident, requests, change etc, only one table data is shown for all. Ex: Inc data on all other 3 tabs. Could you please help on this if you have done some other way (it works when i attach different widgets, but i don't want to clone the same widget multiple times.. )

Thanks & Regards,

Karthik

[brittany_sorrel]

Hi Karthik,

We had a similar requirement. What I ended up doing was building out a widget that contains all the different iterations of the simple list widget.

Here is an outline of what I did to achieve a tabbed group of widgets.

Body HTML template:

<div>
         <uib-tabset class="tab-style" active="activeForm">
                   <uib-tab index="0" heading="tab name goes here">
                   <div class="row">
                             <div class="col-md-3" ng-repeat="item in c.data.items">
                                       <sp-widget widget="item"></sp-widget>
                             </div>
                   </div>
                   </uib-tab>
         </uib-tabeset>
</div>

Server Script:

(function(){
/*here is an array of objects that contain different simple list widget properties */
var listDetails = [
         { table:"sc_req_item", filter:"filter goes here for the list", display_field:"number", maximum_entries:"5", title:"My Tickets", always_show:"true"},
         { table:"sc_req_item", filter:"different filter goes here", display_field:"number", maximum_entries:"5", title:"My Closed Tickets", always_show:"true"}
];

data.items = [];
/*here we loop through the objects and create new instances of the simple list widget*/
for(var i in listDetails){
         data.items.push($sp.getWidget("id of your list widget", listDetails[i]));
}


}

Client Controller:

function() {
   /* widget controller */
   var c = this;
}

The nice part about the html is that you can create as many tabs as needed and just repeat the section with the ng-repeat to show multiple list widgets.

Sorry it took me a while to reply to your comment and I hope this helps you with what you are trying to achieve.

~britt

[Kvark]

use task table with task_type=incident