JS Disable the Delete Row Button When Only One Row is Left

1.1 Expected effect

In a form, if only one row of data is left, that row of data cannot be deleted.

1.2 Implementation ideas

This can be achieved by adding JS events or setting conditional formatting.

2.1 Prepare template

Create a new template and add a dataset:

SELECT * FROM product order by productid limit 1

The dataset only takes out one row of data from the table:

2.2 Add button

1) Add a button to the cell L3.

The button type is: insert row, and the specified cell is: B3,  as shown in the figure below:

2) In the same way, add a button to M3.

The type is: delete row, the specified cell is: B3, the widget name is set to sc1, and the state is not enabled, as shown in the following figure:

Note: If there are other delete row buttons in the template, and they should achieve the same effect, they can be named to sc2, sc3, etc. in turns.

The final style of the report is shown below:

2.3 Realization effect

1) Method 1: Add JS event

Click Template > Web Attributes, select Data Entry Settings, check Individually set for the template, and then add a Loading End event:

JavaScript codes:

var arr=["sc1"];//sc1 is the widget name
for(j=0;j<arr.length;j++){ //traverse to get the widgets in the array
var self=contentPane.getWidgetsByName(arr[j]);
var flag=0;
for (i=0;i<self.length;i++){
var tr=self[i].element.parent().parent().css("display");
if(tr=="table-row"){
    flag++;
    }
}
if(flag==1){ //If there is only one widget left, the button is set to not available
    for (i=0;i<self.length;i++){
      var tr2=self[i].element.parent().parent().css("display");
      if(tr2=="table-row"){
        self[i].setEnable(false);
      }
   }
}
else{ //If there is more than one widget, you can delete it
    for(i=0;i<self.length;i++){
        self[i].setEnable(true);
}
    }
}

2) Method 2: Add conditional formatting to buttons

In addition to adding JS events, this effect can also be achieved by setting conditional formatting.

Change the state of Delete Row button in M3 to available, and add conditional formatting.

The attribute controlled by the conditional formatting is: Widget. Uncheck Use Widget. The formula condition is: row()=3, which makes the Delete Row button in the third row (the row where the first data is located) can not take effect:

2.4 Effect preview

1) PC terminal

Save the report, click Data Entry Preview, and the actual results of the two methods are as follows:

Method 1:

Method 2:

2) Mobile terminal:

Method 1 does not support mobile terminals. The effect of method 2 on the mobile terminal is shown in the figure below:

Method 1:

JS- can not delete when only one record left.cpt

Method 2:

JS- can not delete when only one record left 2.cpt