Widget with Dynamic Drop down select and filtered list

straderw
Giga Contributor

‎06-22-2017 09:46 AM

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 ng-model="c.data.selCompany">

                          <option class="text-success" ng-repeat="item in c.data.selCompany" value="{{item.sys_id}}">{{item.name}}</option>

                  </select>

      <br />

      Select a Department:

                  <select ng-model="c.data.selDepartment">

                          <option class="text-success" ng-repeat="item in c.data.selDepartment" value="{{item.sys_id}}">{{item.name}}</option>

                  </select>

      <br />

      Contracts Associated with Selected Company/Department:

                  <li class="list-group-item" ng-repeat="item in c.data.showContracts">

                          {{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

  • 9,630 Views
2 REPLIES 2

Erik Stolberg
Tera Guru

‎09-01-2017 09:32 AM

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!


0 Helpfuls