How to disable buttons in a table

Wappler General Need Help
1

Hello All,

I have a simple table which lists the Dealer Names from the DB. I have added a cell with 3 buttons, each button opening its Modal with a sever connect Form.

What I am trying to achieve is, upon the success of the Server Connect event I want the button for that particular modal to be disabled for that row.
Requesting your assistance for solving this.

image
image1210×490 15.2 KB

Code for the table:

<div class="table-responsive small">
                    <table class="table table-striped table-bordered table-hover table-sm border-dark-subtle small">
                        <thead class="table-danger align-middle">
                            <tr class="text-center">
                                <th class="sorting" dmx-on:click="query1.set('sort','institute_name');query1.set('dir',query1.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.sort=='institute_name' && query1.data.dir == 'asc'" dmx-class:sorting_desc="query1.data.sort=='institute_name' && query1.data.dir == 'desc'"></th>

                                <th class="sorting" dmx-on:click="query1.set('sort','institute_name');query1.set('dir',query1.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.sort=='institute_name' &amp;&amp; query1.data.dir == 'asc'" dmx-class:sorting_desc="query1.data.sort=='institute_name' &amp;&amp; query1.data.dir == 'desc'">Dealer Name</th>
                                <th class="sorting" dmx-on:click="query1.set('sort','zone');query1.set('dir',query1.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.sort=='zone' && query1.data.dir == 'asc'" dmx-class:sorting_desc="query1.data.sort=='zone' && query1.data.dir == 'desc'">Zone/Branch</th>
                                <th class="sorting" dmx-on:click="query1.set('sort','mobile');query1.set('dir',query1.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.sort=='mobile' && query1.data.dir == 'asc'" dmx-class:sorting_desc="query1.data.sort=='mobile' && query1.data.dir == 'desc'">Mobile</th>
                            </tr>
                        </thead>
                        <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="sc_qry_recceLocations.data.query_recceLocations.data" id="tableRepeat1" dmx-state="query1" dmx-sort="sort" dmx-order="dir" class="table-light align-middle">
                            <tr>
                                <td class="text-center">
                                    <div class="row">
                                        <div class="col-xs-12"><button class="btn btn-outline-primary mt-1 mb-1 ms-1 me-1" dmx-on:click="modal_shopDetails.show();modal_shopDetails.frm_shopDetails.inp_campaign_location_id.setValue(campaign_location_id);sc_qry_singleShopDet.load({camp_loc_id: campaign_location_id})"><i class="far fa-address-card fa-lg"></i></button>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12"><button id="btn_addItems" class="btn btn-outline-primary mt-1 mb-1 ms-1 me-1" dmx-on:click="modal_brandingItems.show();modal_brandingItems.frm_brandingItems.inp_campaign_location_id.setValue(campaign_location_id);sc_qry_singleShopItems.load({camp_loc_id: campaign_location_id})"><i class="fas fa-archway"></i></button></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12"><button class="btn btn-outline-primary mt-1 mb-1 ms-1 me-1" dmx-on:click="modal_shopImages.show();modal_shopImages.data_detail4.select(campaign_location_id);sc_qry_shopBrandingItems.load({campaign_loc_id: campaign_location_id})"><i class="fas fa-camera fa-lg"></i></button></div>
                                    </div>



                                </td>

                                <td dmx-text="institute_name+' (Code:'+inst_code+' Classification: '+classification+')'" class="text-wrap"></td>
                                <td dmx-text="'Zone: '+zone+' Branch: '+branch"></td>
                                <td dmx-text="mobile"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
2

Hi AJ,

In a dynamic table, a condition can be used to disable a button for a row. Let's say, for the button that opens a modal / form to enter shop details, you can add a column in the DB table to check whether shop details for a dealer have been entered.

If the value of this column is 'Yes' or '1' depending on how you set it up, then on the success event of this form, refresh the dealer details with an updated value of this column.

In the UI, bind this condition dynamically to disable the button. Example below:

dmx-bind:disabled="sc_dealer_details.data.q_dealer_details.shop_details_entered==1"
3

Hi Shalabh,

I tried the solution you suggested, however, instead of disabling the single button from the row which fulfills the condition, all the buttons get disabled.

I am checking whether the shop_details_id > 0.

dmx-bind:disabled="sc_qry_singleShopDet.data.query_singleShopDet.recce_shop_detail_id&gt;0"
4

Hi AJ,

Have you setup one field each in the database for the shop_details, branding_items, and shop_images to check whether a dealer has completed these three requirements?

I'm suggesting to setup a boolean or tinyint field type. The purpose of these fields is to store 1 or 0 values (e.g. shop_details_completed = yes or no respectively) for all three requirements. The default values of each field can be set to 0 when creating dealer records. When a dealer has entered shop_details, then the value of this field can be set to 1. The same process will apply for the branding_items and shop_images records.

Then in the UI, when a dealer record is returned from the database, you can check the condition to disable three buttons individually.

To disable shop_details button:

dmx-bind:disabled="recce_shop_detail_completed==1"

To disable branding_items button:

dmx-bind:disabled="recce_branding_items_completed==1"

To disable shop_images button:

dmx-bind:disabled="recce_shop_images_uploaded==1"
5

Hi Shalabh,

Is it necessary to add shop_details_completed = yes or no column to the table?
What if I run a query on the shop_details table and check whether the shop_details_id is generated, if the id is returned ( >0), then it means, record exists & that Button needs to be Disabled.

Will this work or I need to create additional columns as advised by you?

6

It's not essential to add yes/no flags to verify if the dealer details/branding items/images are complete. Your method of checking the detail_id etc. will also work. I was suggesting adding flags to the main dealer record for potential benefits that this approach might offer.

  1. Flags are maintained for each dealer in the main table, eliminating the need to join additional tables to look up for the detail_id / branding_items_id / images_uploaded_id.
  2. Managing code in the UI will be easier to understand.
  3. Users can receive notifications about dealers who haven't provided their details yet.
  4. Filters can be added in the UI, and these flags can be looked up in the API.

Certainly, the method you choose will ultimately depend on the scope and requirements of the application.

7

Hey Thanks @guptast
The solution you suggested of having a new columns in the table with 1/0 flag helped.
Many Thanks.

1 Like
8

You're welcome, AJ. I'm glad that the workflow is working as per your requirements :slight_smile: