# Scrollable form list

If you want replace a grid with a list of editable forms you can use a Replicated Form.

In the editable panel detail you must define the panel like a replicated form.

![](https://4019224283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AGE9gCv0xFi0qT%2Fuploads%2Fyd2SPLPsYeoO49zEbvEi%2Fimage.png?alt=media\&token=c119d2d5-3560-405b-8216-6b51584bb91e)

Now, in your application, you can view an empty table panel container. When you load data with a list of records, the container will display an editable panel for each record.

![](https://4019224283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M2cc5AGE9gCv0xFi0qT%2Fuploads%2F7KK4A280LQVB4RYBTJfJ%2Fimage.png?alt=media\&token=34fb241f-8d76-45fa-b320-ef2fb416b97b)

For the replicable panel you can:

* load the data: you must specify the business component to call and the optional params

```
// XXX: id of editable panel
customPanelXXX.loadData(businessComponentId, { attribute: value });
```

* clear the data of one panel: you must specify the index of panel

```
customPanelXXX.clearData(index);
```

* ask the list of modified records: return an array of records

```
customPanelXXX.getModifiedRecords();
```

* ask the list of index modified records: return an array of index

```
customPanelXXX.getIndexModifiedPanel();
```

* ask the specified panel: return a panel

```
customPanelXXX.getFormPanel(index);
```

* set the data into specified panel

```
// index of panel
// values: javascript object with attribute and value to valorize the panel
// prefix for the inner pbject attribute
customPanelXXX.setFormValues(index, values, prefix);
```

In this type of panel you can use 

* text, number and date control
* dynamic and local combo
* label
* button
* image control