Wappler_Access/views/secure/partinfo.ejs

<!-- Wappler include head-page="layouts/smain" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="partinfo" appconnect="local" components="{dmxNotifications:{},dmxFormatter:{},dmxBrowser:{},dmxBootbox5:{},dmxBootstrap5Modal:{},dmxStateManagement:{}}" -->
<dmx-query-manager id="ids"></dmx-query-manager>

<dmx-api-action id="api_loadpart" noload="true" dmx-bind:url="pg_apiurl.value.concat('partnumbers/num/'.concat(txt_partNumber.value))" dmx-on:error="notifies1.warning('No Records Found');hdn_partid.setValue();txt_partNumber.setValue();txt_description.setValue();select1.setValue();txt_replaces.setValue();txt_replacedby.setValue();txt_primaryvendor.setValue();txt_secondaryvendor.setValue()" dmx-on:invalid="notifies1.warning('Invalid')" dmx-on:success="var_partid.setValue(api_loadpart.data.id)"></dmx-api-action>
<dmx-api-action id="api_getbyid" noload="true" dmx-bind:url="pg_apiurl.value+'partnumbers/getbyid/'+ids.data.pid" dmx-on:success="txt_partNumber.focus();txt_partNumber.setValue(api_getbyid.data.number);txt_description.focus()"></dmx-api-action>
<dmx-value id="var_parttypeid"></dmx-value>
<meta name="ac:route" content="/partinfo">
<dmx-value id="var_partcodeid" dmx-on:updated="var_parttypeid.setValue(conn_basedata.data.partcodes.data.where(`id`, value, '==')[0].parttype.id)"></dmx-value>


<dmx-notifications id="notifies1" align="full">

</dmx-notifications>



<div class="container">
    <div class="row">
        <div class="col">
            <h1>ED (Engineering Database)</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-break w-100">
            <input id="hdn_partid" name="partid" type="text" class="form-control visually-hidden" placeholder="partid" dmx-bind:value="api_loadpart.data.id">
            <div class="form-group mb-3 row">
                <label for="partnumber" class="col-sm-2 col-form-label" style="width:6%;">Part #</label>
                <div class="col-sm-10" style="float: left; width: 94%;">
                    <input id="txt_partNumber" name="partnumber" type="text" class="form-control" dmx-on:blur="api_loadpart.load({})">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="d-block">
                <div class="form-group mb-3 row">
                    <label for="description" class="col-sm-2 col-form-label" style="width:18%;">Description</label>
                    <div class="col-sm-10" style="float: left; width: 82%;">
                        <input id="txt_description" name="description" type="text" class="form-control" dmx-bind:value="api_loadpart.data.description">
                    </div>
                </div>
                <div class="form-group mb-3 row">
                    <label for="pcodes" class="col-sm-2 col-form-label" style="width:19%;">Part Codes</label>
                    <div class="col-sm-10" style="float: left; width: 81%;">
                        <select id="sel_partcodes" class="form-select" name="pcodes" dmx-bind:options="conn_basedata.data.partcodes.data" optiontext="name" optionvalue="id" dmx-bind:value="api_loadpart.data.partcode.id" dmx-on:updated="var_partcodeid.setValue(value)" aria-readonly="true" disabled="true">
                            <option value="Select"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="d-block">
                <div class="form-group mb-3 row">
                    <label for="replaces" class="col-sm-2 col-form-label" style="width:18%;">Replaces</label>
                    <div class="col-sm-10" style="float: left; width: 82%;">
                        <input id="txt_replaces" name="replaces" type="text" class="form-control" dmx-bind:value="api_loadpart.data.replaces.number">
                    </div>
                </div>
                <div class="form-group mb-3 row">
                    <label for="replacedby" class="col-sm-2 col-form-label" style="width:22%;">Replaced By</label>
                    <div class="col-sm-10" style="float: left; width: 78%;">
                        <input id="txt_replacedby" name="replacedby" type="text" class="form-control" dmx-bind:value="api_loadpart.data.replacedby.number">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="d-block">
                <div class="form-group mb-3 row">
                    <label for="primaryvendor" class="col-sm-2 col-form-label" style="width:30%;">Primary Vendor</label>
                    <div class="col-sm-10" style="float: left; width: 70%;">
                        <input id="txt_primaryvendor" name="primaryvendor" type="text" class="form-control" dmx-bind:value="api_loadpart.data.primaryvendor.name">
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="d-block">
                <div class="form-group mb-3 row">
                    <label for="seconaryvendor" class="col-sm-2 col-form-label" style="width:30%;">Secondary Vendor</label>
                    <div class="col-sm-10" style="float: left; width: 70%;">
                        <input id="txt_secondaryvendor" name="seconaryvendor" type="text" class="form-control" dmx-bind:value="api_loadpart.data.secondaryvendor.name">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#" class="btn btn-warning" id="btn_dspec" dmx-show="(txt_partNumber.value.length() &gt; 0)" dmx-on:click="viewsearch.load({id: sel_partcodes.value})">DSpec</a>
        </div>
    </div>
</div>