Unlock entire form to allow edits

App Development
1

Hi all!

We are finding staff can make some unintentional edits when viewing a details page. But ideally we wouldn’t have a separate ‘edit’ page. To have to design two different pages (detail and edit) with constant field changes is not ideal.

In my case i need the entire form (30+fields) to not be editable until a ‘edit button’ is toggled.

Essentially it would be a details page until this edit button is pressed.

Any ideas how I can achieve this?

2

Hi @Hav -

There is the option to created a Records Detail page which can be read only and then an edit page.

When you are in the Page Builder and you select the table, under “Links” you can add a column for edits and a column for details.

Super straightforward to complete.

Hope this helps,
Adam

3

Hi Adam,

Thanks for that. I did know about those different links, however its not quite what im looking for. The problem with this method is that I have to add a field and style it in both the Detail page and Edit page. It just seems counterproductive to do this, as its the exact same information and design, and there is a chance that it could be forgotten to add into both pages.

Ideally it would be just ONE Detail page ( or Edit page), that is only editable once a ‘edit button’ is pressed / selected, otherwise it is Read Only. That way, we only have to add fields to one page.

I don’t think its possible in Tadabase current set up without some custom Javascript code, although i’d like to be proven wrong!

4

You could use a custom component and create a popup edit page but that doesn’t sound like what you are looking for. If you are looking for a “lock/unlock” functionality, that is not native in TB and would require some custom scripting if at all possible.

5

Hey,

Here’s a snippet that you can use:

Javascript Code:

$('#unlockFields').click(function(data){

    $('.form-group select').each(function () {

    $(this).select2("enable",true);

});

 

$('.form-group select').each(function () {

    $(this).prop('disabled',true);

});

 

$('.form-group input').each(function () {

    $(this).prop('disabled',false);

});

 

$('.hit-only-file-upload button').each(function () {

    $(this).prop('disabled',false);

});

})

 


then, add an HTML component:

<p><button id="unlockFields" class="btn">Unlock</button></p>

Take note that you should disable all of your fields first.