Wappler_Access/views/index.ejs

<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" components="{dmxDataTraversal:{},dmxTyped:{},dmxFormatter:{},dmxStateManagement:{},dmxBrowser:{},dmxBootstrap5TableGenerator:{},dmxNotifications:{},dmxBootstrap5Toasts:{}}" -->
<dmx-notifications id="notifies1" align="full"></dmx-notifications>
<dmx-api-action id="api1" noload="true" dmx-bind:url="'http://vapor.prelub.com/api/v1.0/partnumbers/num/'+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();txt_partNumber.focus()" dmx-on:invalid="notifies1.warning('Invalid')"></dmx-api-action>



<meta name="ac:route" content="/">
<dmx-serverconnect id="serverconnect1" url="/api/PartCodes/All"></dmx-serverconnect>
<div class="container">
    <div class="row">
        <div class="col">
            <h1>RPM Studio</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="api1.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="hdn_url.setValue(hdn_baseurl.value.concat(value));api1.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="api1.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="select1" class="form-select" name="pcodes" dmx-bind:options="serverconnect1.data.api.data" optiontext="name" optionvalue="id" dmx-bind:value="api1.data.partcode.id">
                            <option value=""></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="api1.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="api1.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="api1.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="api1.data.secondaryvendor.name">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#" class="btn btn-warning" id="btn_dspec" dmx-bind:href="'/dspec?id='+hdn_partid.value">DSpec</a>
        </div>
    </div>
</div>