UI Page Select Box driving <g:reference> Query

[mpaquette]

Ok I thought this would be simple but I've tried 100 different ways of passing a variable to my query and nothing gets there.

I have a form thats a sort of psuedo-shopping cart.

User submits an order using a record producer, that record has a related list, order_item.

There is a UI action on the order form to Add Order.

This opens a window with a select box where they can select an item type.

Below item type is the item field which is a reference, I need the reference query to show results only for the selected item type.

Right now im using <j:set> to create a variable and im just coercing it to a value of "Tool" (the first option of the selectbox) just to make sure im connecting to my variable in the query, which works so good step 1 good.

However it would seem I have no way of altering this variable while on the form, I tried a few ways of accessing it onChange but I think anything in there is technicallya client script, although I can retrieve the value of ${item_type} in onChange successfully I cannot say ${jvar_item_type} = this.value, since it parses that as Tool = this.value and Tool is undefined.

Is there a way to create a variable that is accessible read/write to both jelly and js?

btw my js skill is decent but i'm just now familiarizing myself with jelly syntax

  <j:set var="jvar_itemType" value="Tool" />

   
    <table>
        <tr id="dialog_buttons">
              <td align="right" style="vertical-align:text-top;">Item Type:</td>
              <td>
              <select id='select_tool_type' style='width:155px' onChange="//This is where I figure I need to change the variable">
                          <g:evaluate var="jvar_item0" expression=
                              "var gr=new GlideRecord('sys_choice');
                                gr.addQuery('name','u_stc_item_master');
                                gr.addQuery('element','u_item_type');
                                gr.query();
                          "/>
                          <j:while test="${gr.next()}">                                
                              <j:if test="${gr.value != ''}">                                      
                                      <option value="${gr.value}">${gr.value}</option>
                                </j:if>
                          </j:while>
                    </select>
              </td>
        </tr>
        <tr>
              <td align="right" style="vertical-align:text-top;">Item:</td>
              <td align="left">
                    <g:ui_reference name="item_number" id="item_number" table="u_stc_item_master" query="u_active=true^u_item_type=${jvar_itemType}" completer="AJAXTableCompleter" columns="u_item_number;u_item_description" />
              </td>
        </tr>

        <tr>
              <td align="right" style="vertical-align:text-top;">Quantity:</td>
              <td align="left">
                      <input type="number" name="qty" id="qty"   value="${jvar_qty}"/>
              </td>
        </tr>
...

[kungfuu72]

You definitely can edit the variable while on the form by using the <g:ui_form> </g:ui_form> tags and then putting the variable in a hidden input that you can then manipulate via client Javascript. I have recently done this: First pass the value that is need as a sysparm in the client script dialog window as you are currently doing.

<j:set var="jvar_task_id" value="${sysparm_task_id}" />



<g:ui_form>

       <input type="hidden" id="task_id" name="task_id" value="${jvar_task_id}" onchange="onChange('task_id')"/>

</g:ui_form>

Then in the client script:

function onChange(id) {

       var field = document.getElementById(id);



       var value = field.value;



       // task_id

       if(id == 'task_id') {

                     g_form.flash('uiProduct', "#F0F5FB", 0);         



                     return true;

               }

       }



       return false;

}

to update the query of results, do it through the Client JavaScript:

For example if your reference field query is this:

<g:ui_reference name="type" id="type" table="sys_choice" query="updateQuery('type')" completer="AJAXTableCompleter" />

Then change the query attribute by returning the string.

function updateQuery(id) {

       var field = document.getElementById(id);



       var query = field.query='GOTOname=u_demand_request^element=u_fulfillment_type^inactive=true';



       return query;

}

Put these all together however you want through the onChange script, and it should all work together for you.

[purbali1]

Hi @Daniel Kratt

I have tried using   above login in my case, but is setting up addition qualifier as

sysparm_target=QUERY%3Au_type%3Dincident&sysparm_target_value=&sysparm_reference_value=&sysparm_nameofstack=reflist&sysparm_clear_stack=true&sysparm_element=not&sysparm_reference=u_symptom_service_mapping&sysparm_view=sys_ref_list&sysparm_additional_qual=updateQuery()

HTML part I have defined as:

<g:ui_reference id="symptomID" name="QUERY:u_type=incident" table="u_symptom_service_mapping" value="${jvar_symptomID}" query="updateQuery()" onchange="updateAssignmentGroups();"/>

On Client Script part I have used below method:

function updateQuery(){

var serviceSysId =gel('QUERY:sys_class_nameINSTANCEOFcmdb_ci_service^ORsys_class_name=cmdb_ci_appl^ORsys_class_name=u_software').value;

var query= "u_type=incident^u_service="+serviceSysId;

return query;

    }

Please Help!!!

[kungfuu72]

Hi Purbali,

You reference field appears to be a reference to the table u_symptom_service_mapping. Having this reference field to another table of (assuming) records, will give you a list of records from the custom u_symptom_service_mapping table.

Because this you are setting the initial value of the record and this is a reference field, make sure your initial value is also a sys_id.

For the function updateQuery() its probably best to pass in the parameter in that function of the field id. In this case your field ID is symptomID so your client script would go more like this.

function updateQuery(id) {

   var field = document.getElementbyId('id')

   var serviceSysId = field.value





   var query = 'u_type=incident^u_service=' + serviceSysId;





   return query;

}

This means that your reference field would look more like this:

<g:ui_reference id="symptomID" name="symptomID" table="u_symptom_service_mapping" value="${jvar_symptomID}" query="updateQuery('symptomID')" onchange="updateAssignmentGroups()"/>