Widget with Dynamic Drop down select and filtered list

straderw · ‎06-22-2017

OK so here is what I am trying to do.... I need/want a widget that has a with 2 drop down select fields. The first one is for "Select Company" which is dynamically generated based on the companies from the 'core_company' table, then the next one will be a "Select Department" which will only be filled out and will be based on the "Company" selected. Then once a department is selected is displays an un-ordered list of items from another table. So I am hoping to do this in a widget so it can be used on a portal and stuff... but I am a little stuck/confused on how to do this really...

Here is a sample of what I have in the "HTML Template"

<div>

Select a Company:

</select>

<br />

Select a Department:

</select>

<br />

Contracts Associated with Selected Company/Department:

{{item.contract_name}} - {{item.department_name}}

</li>

</div>

Here is what I sort of have in the "Client Script"

function($scope, spUtil) {
       var c = this;
       c.server.refresh();
       //alert("Hello 1");
       $scope.$on("field.change", function(evt, parms) {
               alert("Hello 2");
               if (parms.field.name == 'selCompany') {
                       c.data.selectedDivision = parms.newValue;
               }
               c.server.refresh();
       });
       
       //alert("Hello 3");
}

and this this is what I currently have in "Server Script" (and yes I know this does not work really)

(function() {
               var companies = new GlideRecord('core_company');
               companies.addQuery('name', 'CONTAINS', 'CCTA');
               companies.query();
               data.rowCount = companies.getRowCount();
               var selCompany = [];
               while (companies.next()) {
                       //gs.info("Widget Company Name: " + companies.name.toString());
                       var company = {};
                       company.sys_id = companies.sys_id.toString();
                       company.name = companies.name.toString();
                       selCompany.push(company);
               }
       data.selCompany = selCompany;
       //gs.info("selCompany" + data.selCompany);
       
       if (input) {
               var selectedCompany = input.selCompany;
               gs.info("Selected Division: " + selectedCompany);
               var departments = new GlideRecord('cmn_department');
               departments.addQuery('company', 'IS', selectedCompany);
               departments.query();
               //data.rowCount = departments.getRowCount();
               var selDepartments = [];
               while (departments.next()) {
                       gs.info("Widget Company Name: " + companies.name.toString());
                       var department = {};
                       department.sys_id = departments.sys_id.toString();
                       department.name = departments.name.toString();
                       selDepartments.push(department);
               }
               data.selDepartments = selDepartments;
       }
       
       var contracts = new GlideRecord('x_snc_eidm_ccta_contract');
       //contracts.addQuery('name', 'CONTAINS', 'CCTA');
       contracts.orderBy('name');
       contracts.query();
       data.rowCount = contracts.getRowCount();
       
       var showContracts = [];
       
       while (contracts.next()) {
               //gs.info("Widget Company Name: " + companies.name.toString());
               var contract = {};
               contract.sys_id = contracts.sys_id.toString();
               contract.contract_name = contracts.name.toString();
               contract.department_name = contracts.department.name.toString();
               showContracts.push(contract);
       }
       data.showContracts = showContracts;
       
})();

So yeah I know the code doesn't work but yeah this should give you a basic idea what I am trying to do. If anyone can help or point me to some examples or whatever I can look at that would be great. Any help anyone can provide would be greatly appreciated. Thank you ahead of time for all your help.

Message was edited by: William Strader Edit: to help fix code, not using IE again

chirag_bagdai · ‎06-23-2017

Hello,

Try if you can use "sn-record-picker" instead of writing scripts for company & department dropdown :

Reference links:

Reference Fields with the snRecordPicker Directive

Reference Fields with the snRecordPicker Directive - ServicePortal.io - Service Portal, CMS, and Cus...

documentation/widget_internationalization.md at 4d87f23bf877e43d740d14858116a6fa4cfb19f9 · service-...

In-case if you are not aware about unofficial documentation :

GitHub - service-portal/documentation: Here you will find unofficial documentation for the ServiceNo...

Erik Stolberg · ‎09-01-2017

straderw Did you end up figuring this out? I'm looking to implement a similar feature and would appreciate any insight you gained while working on this. Thanks!