Custom In-Line Edit

Help Center Get Answers
1

Currently, our programs allows users to edit certain fields in a table. We would like the ability to disable the ability to edit a field data based on another fields data. Similar to the way the display if/then rules work.

Example:

If Field 2 = “1234” then Field 1 is viewable and editable by all users (employees and admin)

If Field 2 = “6789” then Field 1 is viewable by all but only editable by Admin users.

The settings for inline editing are either off or on but there’s no way to customize this feature similar to the way you can in the display rules.

Any and all help with this including a custom code would be appreciated.

2

Hi @Jon1 - did you ever figure this one out? I’m running into the same issue / use case.

3

Hi Jon,

i understand that you need more flexibility in setting the inline editing status as a function of (i) user roles and (ii) certain field values.

What about a two staged approach: start by generating more than one table which are shown / hidden by page rules making reference to the current user role(s) such as “is (not)” resp. “contains (not)” users / Admin.

In step 2 you modify the tables slightly by having Field1 in two versions in each table. Version A of Field1 allows inline editing, version B does not (hide empty values in the Settings options of this table).

Version A gets a display rule like "If Field2 = “1234”, then “Hide Value”, version B accordingly … in the next table, the display rule might be "If Field2 = “6789”, then “Hide Value” etc.

It looks a little cumbersome do cover all possibilities. Would it work for you?

4

Hi Wolfgang. Thanks for your thoughts! I don’t think that’d work if I understand Jon’s issue (and for the one I’m facing). It’d only hide the column if all values in that column are hidden. I think we’re seeking an approach where certain values are not editable in a single column while others are, conditional on a different field value.

5

Thank you @Adam3 for the clarification. Indeed, this is something different.

The closest I have come to such a column, where some fields are editable and others are not, is to replicate one column in another column and display both columns in one table. I used one column for grouping, the other for editing. Without knowing your problem exactly, I don’t know if a variation of this would help you.

6

Thanks @Wolfgang_Brötz

I think I figured this out. Admittedly a bit ‘hacky’ but it seems to work just fine.

  • Step 1. Set a display rule to show an icon in the field you do not want to inline edit - I’ve used the “fa-square-o” icon. This should be the only pace in that table that the icon is used.

  • Step 2. Insert the following code, referencing your table view, and the field #s that you want hidden if the ‘no inline edit’ condition is true for that record.

Obviously this isn’t secure as the data is still loading prior to being hidden / inline editing turned off, but may work for others’ basic use cases!

$(document).on('knack-view-render.view_##', function(event, view, data) {
   const cells = document.querySelectorAll(".field_##.cell-edit, .field_##.cell-edit");
   cells.forEach(cell => {
       if (cell.innerHTML.includes('fa-square-o')) {
         cell.style.pointerEvents = "none";
         //remove / replace if you don't want the value to also be hidden
         cell.innerHTML = null;
       }
  });
});
1 Like