Grey out button until condition met on button block

Hello, I am creating a custom form where a user is required to fill out a field before clicking a save button. I want to make the button greyed out, not invisible, however I am struggling to do so. I saw on other posts I can do so with a button bar, but I only see a button block on my components list, which I tried to implement. However, despite that, the Save button is invisible until the field is filled out, not greyed out.
I looked at Greyed out button in button bar and this custom forms app, but despite have similar steps, the button remains invisible. Any suggestions would help a lot thanks!


My custom action for Save button.


Empty field screen

Hello,

My advise would be to have the screen called “New Payroll Screen” pop up as a “Show form screen”, you probably have it set up as “Show new screen”

If you change it to a form screen you can directly add the data to your table called “Transactions” and simply add an action after submit in which you set the column values to what you want. Set the text field as “required”, in this way the submit button will be greyed out until filled. And the data would be only updated after submitting.

I saw the posts on the greyed out button and the sample form app, but I could not replicate this directly and I’m not completely sure how it works with button blocks, as they hide based on conditions. From what I could see both apps were Classic Apps, and had that setting.

It would be a nice feature for the new Glide Apps, as it seems very useful in some cases.

Hope this helps!

Hi Kev, thanks for your quick reply! I originally had this as a show form screen, but the problem is I need to update the client’s next period starting date in the client table AND make a new row in the transactions table for the current period starting date. If I set the form screen destination to be the Transactions table, I cannot update the next payroll starting date.

For example: Greg has a current starting date of 6/1/24 in the client table. Submitting a new payroll, will make a new transaction row with this date, but I also need to update Greg’s current starting date to be updated for the next payroll period.

Do you know if there is some workaround to making a new row for the Transactions table, and updating payroll period in the Client table?

I also do unfortunately see those links were for Classic Apps not current ones, so if there is no workaround with the form screen, I will just have to deal with the save button being invisible.

Button bar was exclusively for Classic Apps I believe, “button block” is what we have now.

I think this is the closest thing.

Setup with an action row component, no text or label, style being Title.

Problem is it doesn’t seem to show the acton title on mobile for me.

If I read this right, can you try using an on-submit action with a set column step to do what you want?

1 Like

Yes!

This would be the best workaround. When you have the form screen open, without selecting any component, on the right column you should see this option:

Here you can create a similar action as you previously had based on the data being submitted. This will be executed as soon as the form is sent.

In my case, to address the button issues:

  1. To keep the button from disappearing, it’s about not letting the button idle. I added another condition, for example, to display a notification.
  2. For the gray-out issue, so far I still rely on custom CSS.

I tried this, but if you are adding a row for one table, I do not believe Glide allows you to set the rows for another table. In this case, a new form would be for the Transactions table, but when I try setting the values on the submit button, I cannot choose to do so for the Client table.


Like in this case, I want to update a date for the associated client in the Client Table, but can only do so in the Transactions table since that is the form’s destination.

Oh I see I could just make the button only say ‘Error’ if fields are empty. How did you add CSS for the gray out? Thanks!

1 Like

You would just have to find a way to create a relation/query from the Transactions table to the Client table. Which column you use depends on your structure. Then you can use that relation/query as the path to do the set column action.

2 Likes

CSS is only available on Business/Enterprise plans. Would be straightforward to add it if you are on those plans.

1 Like
1 Like

This is the way to go! You can do so with a client email, phone or even a number you assign to it. Add a relation column in the Transactions Table.

Once you do this, the following option will show up to let you edit the data on the Client table:

Untitled

1 Like

Oh I didn’t think of making a relation, that makes more sense. Thanks a lot!

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.