UI page to display table data based on reference type variable

Go to solution
Bhaskar24
Tera Expert

‎10-12-2017 01:56 AM

Hi All,

I want to create an UI Page: "Search Asset" to search the assets for the users from the table: "alm_asset" based on Assigned to field.

Fields:

Requested for:

[User lookup table]

My Assets:

Displayed within a read only table within the form

Could you please help me, how to create the UI Page for the above requirement?

Thanks & Regards,

Bhaskar

0 Helpfuls
  • 6,121 Views
1 ACCEPTED SOLUTION

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron
In response to Bhaskar24

‎10-12-2017 05:24 AM

Hi Bhaskar,



Another approach using iframe is as follows:



Link will be automatically present since it is a table list layout


Also "Select User" and the "lookup icon" are both in single line since those are included in table tag



Steps/Approach:


1) Select the user


2) iframe will display the table list layout with filter as assigned_to is the user you selected


3) on clicking user can visit the record


4) Also if user is cleared out iframe src attribute is cleared out and div is made hidden


5) If no record found in alm_asset table for that user alert is shown and src attribute cleared and div is made hidden



Drawback:


if user visits the record and clicks on back icon the filter will go.


User can apply his/her own filter and view other records also



HTML


<?xml version="1.0" encoding="utf-8" ?>


<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">


      <html>


      <body>


              <table>


              <th>Select User:</th>      


  <th><g:ui_reference name="userRecords" id="userRecords" table="sys_user" completer="AJAXTableCompleter" onchange="generateTable()"/></th>      


              </table>


              <br/>


              <div id="dvTable" style="display:none">


                      <iframe id="alm_asset" name="alm_asset" src="" style="overflow: hidden; height: 100%;


              width: 100%; position: absolute;" height="100%" width="100%"></iframe>


</div>


      </body>


      </html>


</j:jelly>



Client Script



function generateTable(){


     


      var userSysId = gel('userRecords').value;


     


      if(userSysId!=''){


              var gr = new GlideRecord("alm_asset");


              gr.addQuery("assigned_to", userSysId);


              gr.query();


              if(gr.rows.length > 0){


                      document.getElementById('alm_asset').src = '/alm_asset_list.do?sysparm_query=assigned_toDYNAMIC' + userSysId ;


                      document.getElementById('dvTable').style.display = '';


              }


              else{


                      // no assets foundso clear src of iframe and hide the div


                      alert("No assets found");


                      document.getElementById('alm_asset').src = '' ;


                      document.getElementById('dvTable').style.display = 'none';


              }


      }


      else{


              // remove the src attribute of iframe and show alert and hide the div


              document.getElementById('alm_asset').src = '' ;


              document.getElementById('dvTable').style.display = 'none';


      }


}



I hope this would be enough. Since almost all the coding you have received from my end.



Mark Correct if this solves your issue and also hit Like and Helpful if you find my response worthy based on the impact.


Thanks


Ankur


Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader

View solution in original post

0 Helpfuls
8 REPLIES 8

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron

‎10-12-2017 02:11 AM

Hi Bhaskar,



You want to show user as lookup field and based on user selection show assets where this user is Assigned To


OR


You want to have lookup for Asset and once user selects the asset show few of the column data



Mark Correct if this solves your issue and also hit Like and Helpful if you find my response worthy based on the impact.


Thanks


Ankur


Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader
0 Helpfuls

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron

‎10-12-2017 03:02 AM

Hi Bhaskar,



Following is the sample UI Page. Hope this helps you exactly. you can apply CSS to your table as per your requirement. also align the lookup etc



Steps/Approach:


1) Select the user from lookup.


2) Based on this user populate the table. For example purpose I have taken only 3 columns. you will have to take care when columns you need are reference because in client script section getDisplayValue() won't work


3) When user is cleared out I am making the html table as empty and hiding that table as well.


4) Also if no asset in that table for that user showing an alert and no table will be formed.



HTML


<?xml version="1.0" encoding="utf-8" ?>


<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">



<html>


  <style>


table {


      border-collapse: collapse;


      width: 100%;


}



th, td {


      text-align: left;


      padding: 8px;


}



tr:nth-child(even){background-color: #f2f2f2}



th {


      background-color: #4CAF50;


      color: white;


}


</style>


             


      <body>


Select User: <g:ui_reference name="userRecords" id="userRecords" table="sys_user" completer="AJAXTableCompleter" onchange="generateTable()"/>


              <br/>


              <div id="dvTable">


</div>


      </body>


      </html>


     


</j:jelly>



Client Script


function generateTable(){


     


      var userSysId = gel('userRecords').value;


      var tableHeaders = ['Asset Tag','Display Name','Serial Number'];


     


      if(userSysId != ''){


              var gr = new GlideRecord("alm_asset");


              gr.addQuery("assigned_to", userSysId);


              gr.query();


              if(gr.rows.length > 0){


                     


                      var table = document.createElement("TABLE");


                      table.border = "2";


                      table.padding= "10px";


                      table.id = "myTable";


                      var columnCount = tableHeaders.length;


                      var row = table.insertRow(-1);


                      for(var i=0; i < columnCount; i++) {


                              var headerCell = document.createElement("TH");


                              headerCell.innerHTML = tableHeaders[i];


                              row.appendChild(headerCell);


                      }


                     


                      while (gr.next()) {


                              row = table.insertRow(-1);


                             


                              var assetTag = row.insertCell(0);


                              var displayNameCell = row.insertCell(1);


                              var serialNumberCell = row.insertCell(2);


                             


                              if(gr.asset_tag != undefined){


                                      assetTag.innerHTML = gr.asset_tag;


                              }


                              else{


                                      assetTag.innerHTML = '';


                              }


                              displayNameCell.innerHTML = gr.display_name;


                              serialNumberCell.innetHTML = gr.serial_number;


                             


                              var dvTable = document.getElementById("dvTable");


                              dvTable.innerHTML = "";


                              dvTable.appendChild(table);


                      }


              }


              else{


                      // if previous user was having asset and now selected user has no asset the earlier table needs to be cleared out


                      alert("No assets for this user");


                      if(document.getElementById("dvTable")){


                              var Table = document.getElementById("dvTable");


                              Table.innerHTML = "";


                      }


              }


      }


      else{


              // this code will clear out the table when user is cleared out


              var Table = document.getElementById("dvTable");


              Table.innerHTML = "";


      }


}



If this helps you you can also endorse the content.


How to Endorse Content



Mark Correct if this solves your issue and also hit Like and Helpful if you find my response worthy based on the impact.


Thanks


Ankur


Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader

Go to solution
Bhaskar24
Tera Expert
In response to Ankur Bawiskar

‎10-12-2017 04:23 AM

Hi Ankur,




Thanks a lot for your reply!


The code you suggested is working as expected, but I need few more points to be covered.


1. Selected User field's box should be smaller


2. I want to filter the records as below:


Model Category is Laptop / Tablets


(or) Model Category is Mobiles


3. If we click on Asset tag field value, it should open the asset


Could you please help me on this.




Thanks & Regards,


Bhaskar


0 Helpfuls

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron
In response to Bhaskar24

‎10-12-2017 04:59 AM

Hi Bhaskar,



1. Selected User field's box should be smaller -> this can be achieved using table tag include the text Select User and <g:ui_reference> in <tr> <td> and it will look fine


2. I want to filter the records as below:   -> this is difficult to achieve. it looks like you want to have something similar to list layout.


Model Category is Laptop / Tablets


(or) Model Category is Mobiles


3. If we click on Asset tag field value, it should open the asset -> this can be achieved by adding anchor tag and link to the record



One thing as an alternative to this would be apply the filter on alm_asset table and include iframe and pass the query so that it will include only those records.



Mark Correct if this solves your issue and also hit Like and Helpful if you find my response worthy based on the impact.


Thanks


Ankur


Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader
0 Helpfuls