# OUT OF SERVICE - How to use a switch in a table - UI designer

## After building a table and dragging a switch field, you need TODO:

Usado em listapage, listaenv, Transaccao

![](https://4269523424-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBVX2OMafn-xpQ5esuM%2F-LV0VFOrQ0t4Sf6VNyXX%2F-LV0Vto0ae9KPoWDqjBl%2Fimage.png?alt=media\&token=b149e37a-c98e-4484-9e4e-0f399b81122b)

### 1. Give a name to the table with the switch. Example "isac":

![](https://4269523424-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBVX2OMafn-xpQ5esuM%2F-LBVX74cPiuAqptxKp3g%2F-LBVXEj2EKOoEmJtfES5%2Fadd%20a%20class%20name.png?generation=1525259241630544\&alt=media)

### 2. In JS tab add:

* **isac** - nome da class da tabela
* **p\_*****status\_page*** - tag do checkbox/switch
* **p\_*****id*****\_fk** - if tag hidden add \_fk of each line for action purpose in the change function (3. point)
* **p\_id** *- name of the param that will be used in method changestatus()*
* webapps?r=\[*app*]/\[*page*]/\[*actionXXX*()]

```javascript
$('.isac').on('change','td input[name="p_status_page"]',function(){

        var isChecked = $(this).is(':checked'),
            id         = $(this).parents('tr').find('input[name="p_id_fk"]').val(),
            val        = isChecked ? 1 : 0;

        $.IGRP.request('webapps?r=igrp_studio/ListaPage/changeStatus',{
            params : {
                p_id : id,
                p_status_page : val
            },
            success:function(r){
                var type = r.status ? 'success' : 'danger',
                    msg  = r.status ? 'Estado alterado' : 'Estado não foi alterado';

             
                    $.IGRP.notify({
                        message : msg,
                        type    : type
                    });
            },
            fail:function(){

            }
        });

    });


```

### **OR**

#### **If the id tag is a column and not a hidden field, no need to add \_fk. See name=code without \_fk**

```javascript
$('.isac').on('change','td input[name="p_status"]',function(){
        var isChecked = $(this).is(':checked'),
            code = $(this).parents('tr').find("[item-name=codigo]").text(),
            val = isChecked ? 1 : 0;
      
        $.IGRP.request('webapps?r=igrp/transaccao/changeStatus',{
            params : {
                p_code : code,
        p_status : val
            },
            success:function(r){
                var type = r.status ? 'success' : 'danger',
                    msg = r.status ? 'Estado alterado!' : 'Estado não foi alterado!';

              
                    $.IGRP.notify({
                        message : msg,
                        type    : type
                    });
            },
            fail:function(){

            }
        });

    });


```

## 3. Add this lines to the controller.java

* **In the actionIndex()**

{% code title="actionIndex()" %}

```java
table1.setStatus(ac.getStatus());
table1.setStatus_check(ac.getStatus() == 1 ? ac.getStatus() : -1);
```

{% endcode %}

* **Import in the reserved import area:**

```
import org.json.JSONException;
import org.json.JSONObject;
import com.google.gson.Gson;
```

* **In the START-PRESERVED-AREA(CUSTOM\_ACTIONS)**

**Reading the params p\_id and p\_status of the javascript**

```
public Response actionChangeStatus() throws IOException, IllegalArgumentException, IllegalAccessException, JSONException {

        this.format = Response.FORMAT_JSON;
        int id = Core.getParamInt("p_id");
        int status = Core.getParamInt("p_status");
        boolean response = false;

        if (id != 0)) {
            Action page = new Action().findOne(id);
            if (page != null) {
                page.setStatus(status);
                if (page.update() != null)
                    response = true;
            }
        }

        JSONObject json = new JSONObject();
        json.put("status", response);     
        return this.renderView(json.toString());
    }
```