How to auto populate choice option in UI page so that I don't write all options manually in html.

[riyachuphal]

Hi 

I am creating a UI page which has a dropdown to Select state. Now i actually have around 35 choices and i don't want to write them up in html manually incase some option is made inactive in future.
Is there another way to somehow auto-populate them to UI page.

Here's my script.

 <div id="StatusD" class="row form-section form-group">

        <div class="col-sm-6 section-title-top is-required control-label" style="text-indent: -15px; padding-left: 30px;">

            <label title="${gs.getMessage('Select status')}" class="control-label col-xs-12 col-md-9">

            <span style="display:inline" class="mandatory required-marker"></span>

            <span class="label-text">${gs.getMessage('State')}</span>

            </label>

        </div>  

        <div class="col-xs-12 col-md-6" >

            <select name="Status" id="Status" class="form-control" ng-non-bindable="true" style="direction:ltr; ">  

                <option value=""> $[gs.getMessage("Select State")]</option>

            </select>

            <div id="vul_error_messages" style="display: none;">

                <span class="outputmsg_div"></span>

            </div>

        </div>

    </div>

[ankitbanerj]

Hi @riyachuphal ,
can you try this?

<g:ui_choice name="Status" table="incident" field="state" />

[pavani_paluri]

Hi @riyachuphal ,

Create a client callable script include and return the choices you want in json. Inside <script> tag you can write function to glideajax the script include.

Update the state dom element with output.

<script>
function loadStates() {
var ga = new GlideAjax('GetStates');
ga.addParam('sysparm_name', 'getStatesList');
ga.getXMLAnswer(function(response) {
var states = JSON.parse(response);
var select = document.getElementById("Status");

states.forEach(function(state) {
var option = document.createElement("option");
option.value = state.value;
option.text = state.label;
select.appendChild(option);
});
});
}

document.addEventListener("DOMContentLoaded", loadStates);
</script>

Mark it helpful if this helps you to understand. Accept solution if this give you the answer you're looking for
Kind Regards,
Pavani P