How do I change the disabled property of a simple text-field dynamically in form.io's data-grid component?

Question

I am exploring form.io's form-builder concepts and components.

I dragged and dropped a data-grid component into my form during that process. The data-grid component has three sub-components named id, userId, and title ( Three of them are text fields and disabled which means we can edit )

I have loaded the data for the data-grid component through an external API. The API provides a response as an array of objects and each object will have the id, userId, and title fields. I have mapped the values to my data-grid component as below :

## data-grid component settings: under the data tab and in the custom default value section's javascript :

var gridData = [];
function loadData() {
  var apiUrl = "https://jsonplaceholder.typicode.com/posts";
  fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
      data.forEach(function(row) {
        gridData.push({
          "id": row.id,
          "userId": row.userId,
          "title":row.title,
          "body": row.body
        });
      });
      return instance.setValue(gridData);
    })
}
loadData();

It loads the data as expected :

Current data-grid component loaded with external api data :

Now I want to provide an edit option for the title for specific rows which satisfy some conditions based on the values of id and userId.

For example, if the id and userId are equal in any rows, the title field of those rows must be editable which means the disabled property of those specific title fields must be changed to false.

Available possibility :

We can make specific title fields editable in the logic tab of the title component's **setting:
**
Under the logic tab, we have logic and action fields. We can utilize it. But I don't know How to compare the id and userId for each row and enable those specific rows.

Someone, please help me to fix this.

Answer 1

I have found a solution for the above issue I mentioned.

We can enable the edit option for the title field for specific rows based on the condition as follows:

step 1: Choose the field ( In my case "title" )

step 2: Go to the Logic tab of the chosen field

The logic tab will have two sections as follows:

       1 ) Logic section.
       2 ) Action section.

step 3: In the Logic tab, provide Logic Name and choose the type of logic as javascript.

step 3.1: write your logic : ( In my case I want to check whether the id and userId are the same and need to store the condition in the result variable which is already available ).

javascript logic :

result = row.id != row.userId

step 4: In the Action Tab, give action name :

step 5: Select the type as the property.

step 6: Select the component property from the dropdown ( In my case Disabled )

step 7: select setState value either true or false ( In my case False )

Action tab :

step 8: Save the logic and action.

Result :

So wherever id and userId are not same, those title fields are only enabled

NOTE: We can also have multiple actions for the same logic.