Wappler_Access/views/partcodetree.ejs

<!-- Wappler include head-page="layouts/newmain" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="partcodetree" appConnect="local" components="{dmxBootstrap5TableGenerator:{},dmxBootstrap5Modal:{},dmxFormatter:{}}" -->
<dmx-value id="var_id" dmx-on:updated="conn_top.load({id: value},true)"></dmx-value>
<meta name="ac:route" content="/partcodetree">
<dmx-serverconnect id="conn_top" url="/api/PartCodes/Top"></dmx-serverconnect>
<dmx-serverconnect id="conn_getparent" url="/api/PartCodes/Byid" noload="true" dmx-on:success="var_id.setValue(conn_getparent.data.api.data.parent.id)"></dmx-serverconnect>
<div class="container">

    <div class="row">
        <div class="col">
            <button id="btn_back" class="btn" dmx-show="var_id.value" dmx-on:click="conn_getparent.load({id: var_id.value})">
                <i class="fas fa-backward"></i></button>
            <input id="inp_filter" name="filter" type="text" class="form-control">
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover table-sm">
                    <thead>
                        <tr>
                            <th scope="row"></th>
                            <th class="visually-hidden">Id</th>
                            <th>Name</th>
                            <th class="visually-hidden">Parttype</th>
                            <th>Ispartcode</th>
                            <th>Code</th>
                        </tr>
                    </thead>
                    <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_top.data.api.data.where(`name`, inp_filter.value, 'contains')" id="tableRepeat1">
                        <tr>
                            <td>
                                <button id="btn_children" class="btn" dmx-on:click="var_id.setValue(id)" dmx-show="(children.count() &gt; 0)">
                                    <i class="fas fa-caret-down"></i></button>
                                <button id="btn_select" class="btn" dmx-show="ispartcode">Button</button>
                            </td>
                            <td dmx-text="id" class="visually-hidden"></td>
                            <td dmx-text="name"></td>
                            <td dmx-text="parttype" class="visually-hidden"></td>
                            <td dmx-text="ispartcode"></td>
                            <td dmx-text="code"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>