Make app uneditable after hitting Submit

I have an app that displays a chart where the user can input values. After the user hits the Submit button, I want the chart to be locked down so for that specific user, he/she cannot make anymore changes nor submit a change. Is there a way to do such a thing?

1 Like

Hello @Paul_Lim ,
Welcome to the Retool community!

Create a temporary state variable (isLocked) in Retool, set it to true on submission, and use it to disable inputs and the Submit button. Persist the locked status in the database and initialize isLocked based on the query result when loading the app.

2 Likes

Thank you @WidleStudioLLP! Do you know where I can find tutorials on creating a temporary state variable and how to persist lock satus in the database?

So this is what I came up with. I created a new variable called IsButtonDisabled with an initial value of false.

Then I clicked my Submit button. On the right-hand panel, I defined a Click Event Handler to having the following values:

  • Action = Set variable
  • State = isButtonDisabled
  • Method = Set value
  • Value = true

Also in the Disabled box, I entered {{ isButtonDisabled === true }}.

I think this should do the trick but after saving it and entering preview mode, the Submit button is not disabled after the click.

1 Like

In the Disabled input box, modifying "isButtonDisabled" to "isButtonDisabled.value" did the trick.

1 Like

Glad you figured it out! Let us know if you have any follow up questions.

1 Like

Hey there, I have another question. While the steps above will lock down the Submit button and chart after the click on the Submit button, the user can just reload the page and the Submit button will be clickable again along with the columns in the chart being editable. Is there a way to lock these down even after reloading the page?

One thing you can try is make a quick retool db table that tracks if the user has already made a change and read and write to that table.

I was thinking the same. So I created a table with a column "comp_app_submitted" that has a value of False by default. I created a query and tied this as an event handler to my submit button. So when the user clicks the submit button, this updated the table for that user in column "comp_app_submitted" to True.

I then created another query that fetches the value of the column "comp_app_submitted" like so

When clicking on the Submit button, I originally had this code in the Disabled input box:
{{ isButtonDisabled.value === true }}
image

So I thought, I can just replace this as:
{{ isButtonDisabled.value === fetchSubmittedState }}

But that doesn't seem to do the trick. Am I close? Maybe I'm not using the right syntax somewhere?

Or rather maybe it'd be something like this:
{{ fetchSubmittedState.value === true }}

I think you should be able to just set the disable input to {{ fetchSubmittedState }}.

This value will persist across sessions. Is that the behavior you're expecting?

Exactly this. When I first attempted this, it would be locked down but I could get around it by refreshing my browswer.

I updated my value to false so when I run the {{ fetchSubmittedState }} query, it also returns false. I then modified my disable input to just be {{ fetchSubmittedState }} but I notice my button is automatically locked down from the get go.

I would have expected the submit button to be clickable, and once I click the button, '{{ fetchSubmittedState }}` should turn to true and the button shouldn't be clickable at that point.

How come the button is unclickable even though {{ fetchSubmittedState }} returns false?

Are you free tomorrow at 11 am pt? This is probably a question we can tackle quickly in Office Hours. You'll have the opportunity to share your screen and we can walk through your app together.

Thank you Abbey! Fortunately I was able to connect with a colleague and we were able to figure it out. The issue mainly came from how the data came through from Snowflake, so there was some formatting/cleaning we had to do before I was able to pass through the data.

I'll keep these office hours in mind in the future. Are these the ones held through Discord?

1 Like

That's great news! Yes we host Office Hours on Discord twice a week, Tuesdays & Thursdays.