# Grey out button until condition met on button block **URL:** \ **Category:** Ask for Help\ **Created:** [February 29, 2024, 5:49pm UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293 "2024-02-29T17:49:54Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![vedant01](https://avatars.discourse-cdn.com/v4/letter/v/22d042/32.png) [@vedant01](https://community.glideapps.com/u/vedant01)\ **Post date:** [February 29, 2024, 5:49pm UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/1 "2024-02-29T17:49:54Z")
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](https://community.glideapps.com/t/greyed-out-button-in-button-bar/28745) and this [custom forms app](https://snowy-fire-6109.glideapp.io/), but despite have similar steps, the button remains invisible. Any suggestions would help a lot thanks! ![Screen Shot 2024-02-29 at 12.27.50 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/d/4d17ffb2bb4a5b61fbcfbacf8c625786ba6aa889.png) My custom action for Save button. ![Screen Shot 2024-02-29 at 12.48.44 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/4/34ada035319acc987b01605f5b562d1782d449b2.png) Empty field screen ![Screen Shot 2024-02-29 at 12.48.57 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/c/cc6ed15b74d4c5b1501336d26fec39ac7406efc5.png) ---
**Author:** ![Kev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kev/32/70646_2.png) [@Kev](https://community.glideapps.com/u/Kev)\ **Post date:** [February 29, 2024, 9:05pm UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/2 "2024-02-29T21:05:09Z")
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](https://www.glideapps.com/docs/reference/account/meet-the-new-glide-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! ---
**Author:** ![vedant01](https://avatars.discourse-cdn.com/v4/letter/v/22d042/32.png) [@vedant01](https://community.glideapps.com/u/vedant01)\ **Post date:** [February 29, 2024, 9:42pm UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/3 "2024-02-29T21:42:13Z")
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. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [February 29, 2024, 11:45pm UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/4 "2024-02-29T23:45:40Z")
> [@vedant01](#): > > I saw on other posts I can do so with a button bar Button bar was exclusively for Classic Apps I believe, “button block” is what we have now. I think this is the closest thing. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/e/fe3d5515582455abd8c574dfd2ce4a1fd3e94f25.png) Setup with an action row component, no text or label, style being Title. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/b/cbfc27d840180871b319e14ea1c917154a3e466c.jpeg) Problem is it doesn’t seem to show the acton title on mobile for me. > [@vedant01](#): > > 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. If I read this right, can you try using an on-submit action with a set column step to do what you want? ---
**Author:** ![Kev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kev/32/70646_2.png) [@Kev](https://community.glideapps.com/u/Kev)\ **Post date:** [February 29, 2024, 11:57pm UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/5 "2024-02-29T23:57:16Z")
> [@vedant01](#): > > 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? Yes! > [@Kev](#): > > add an action after submit > [@ThinhDinh](#): > > using an on-submit action 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: ![Sampleaction](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/2/9210ea27bcb018c205115f825efd33fa7d3160f1.png) 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. ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [March 1, 2024, 12:03am UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/6 "2024-03-01T00:03:02Z")
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. ---
**Author:** ![vedant01](https://avatars.discourse-cdn.com/v4/letter/v/22d042/32.png) [@vedant01](https://community.glideapps.com/u/vedant01)\ **Post date:** [March 1, 2024, 12:20am UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/7 "2024-03-01T00:20:09Z")
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. ![Screen Shot 2024-02-29 at 7.18.56 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/5/e57ebcdd74e5727217c6ba544049f1942eb07586.png) 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. ---
**Author:** ![vedant01](https://avatars.discourse-cdn.com/v4/letter/v/22d042/32.png) [@vedant01](https://community.glideapps.com/u/vedant01)\ **Post date:** [March 1, 2024, 12:21am UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/8 "2024-03-01T00:21:25Z")
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! ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [March 1, 2024, 12:21am UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/9 "2024-03-01T00:21:31Z")
> [@vedant01](#): > > 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. 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. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [March 1, 2024, 12:22am UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/10 "2024-03-01T00:22:08Z")
CSS is only available on Business/Enterprise plans. Would be straightforward to add it if you are on those plans. ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [March 1, 2024, 12:24am UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/11 "2024-03-01T00:24:02Z")
> [@Exploring the Enhanced Capabilities of Glide's Native Form](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876): > > I want to share about the additional capabilities that we can achieve with Glide’s native form. What I have tested with the help of CSS is that native forms can also be applied for validation. Create your validation in the table columns and present it through messages via the “hint” component. Add the visibility conditional and the class “prevent-submit” to these hint components. Add the following CSS code: /\*Container Form\*/ #page-root:has(.prevent-submi… ---
**Author:** ![Kev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kev/32/70646_2.png) [@Kev](https://community.glideapps.com/u/Kev)\ **Post date:** [March 1, 2024, 12:35am UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/12 "2024-03-01T00:35:27Z")
> [@ThinhDinh](#): > > find a way to create a relation/query from the Transactions table to the Client table. 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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/3/33c906d3edc8c2dcd63cfdb704320aad7d88ac58.png) ---
**Author:** ![vedant01](https://avatars.discourse-cdn.com/v4/letter/v/22d042/32.png) [@vedant01](https://community.glideapps.com/u/vedant01)\ **Post date:** [March 1, 2024, 1:08am UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/13 "2024-03-01T01:08:32Z")
Oh I didn’t think of making a relation, that makes more sense. Thanks a lot! ---
**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\ **Post date:** [March 8, 2024, 1:09am UTC](https://community.glideapps.com/t/grey-out-button-until-condition-met-on-button-block/71293/14 "2024-03-08T01:09:13Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.