bswhitney / Cityworks-UICustomization-Training-Snippets

1 stars 0 forks source link

Turn custom field into dropdown #3

Open walker opened 4 years ago

walker commented 4 years ago

I can't seem to find an example of turning a custom text field into a dropdown. I would think this should be possible... maybe not? If not, I can insert a dropdown and then take the selected option and copy it to a hidden text field, perhaps.

walker commented 4 years ago

I have done this. In my case, I used a custom field on a work order:

Add the control to XML/{template name}/WOGeneral.xml:

<controls>
    <control id="Text1" visible="true" />
</controls>

Then, in layout I specify where I want the text input to end up:

  <layout>
    <panel id="General">
      <row>
        <label id="label_Text1">
          <text>My Label:</text>
          <linkedControls>
            <control id="Text1" />
          </linkedControls>
        </label>
        <controlContainer>
          <linkedControls>
            <control id="Text1" />
          </linkedControls>
        </controlContainer>
        <label id="myCustomCSS" type="plain">
          <text>
          <![CDATA[
            <style type="text/css">
            #ctl00_Main_ctl220 {
              width: 375px;
            }
            </style>
          ]]>
          </text>
        </label>
      </row>
</layout>

And finally, I append some javascript (put this within <layout> as well). I populate the dropdown, by default to the option that matches a Map Layer Field value from the asset attached to the work order.

    <panel id="MapLayers">
      <row>
        <label id="myCustomJS" type="plain">
          <text>
          <![CDATA[
            <script>
              $(function() {
                if($('#ctl00_Main_ctl220').length != 0) {
                  if($('#ctl00_Main_cboWODesc option:selected').text()=='MY WORKORDER DESC') {
                    if($("#ctl00_Main_ctl220").val()=='') {
                      var valfrom_ML_Fields = $("#ctl00_Main_ctl323_ctl00 tr:contains('MLFIELDNAME')").find(':last-child').html();
                      // console.log(valfrom_ML_Fields );
                      $('#ctl00_Main_ctl220').val(valfrom_ML_Fields );
                    }
                    $('#ctl00_Main_ctl220').parent().append('<select id="ctl100_Main_ctl220_select"><option value="VALUE HERE">VALUES LABEL HERE</option><option value="VALUE HERE">VALUES LABEL HERE</option></select>');
                    $('#ctl00_Main_ctl220').css('display', 'none');
                    if($("#ctl00_Main_ctl220").val()!='') {
                      var select_fillin = $("#ctl00_Main_ctl220").val();
                      // find option value that corresponds
                      // var optVal = $("#ctl100_Main_ctl220_select option:contains('"+select_fillin+"')").attr('value');
                      // select the option value
                      if(select_fillin != '') {
                        $("#ctl100_Main_ctl220_select").val( select_fillin );
                      }
                    }
                    $('#ctl100_Main_ctl220_select').on('change', function(e) {
                      $('#ctl00_Main_ctl220').val($(this).val());
                    });
                  }
                }
            </script>
          ]]>
          </text>
        </label>
      </row>
    </panel>