Open a hidden form by clicking a button

[richardch372]

I am redesiging my pages to use the list component for mobile devices. I think it looks better and more in keeping with mobile apps.

I see that it is not possible to add a record with a list component so i have created a form to add new connected records. This is all working fine.

I dont want the add record form visible all of the time, it makes the page quite long, my back and next buttons are at the bottom of the page.

Is it possible to hide the form (done this with css ‘hide’) click a button to show the form, preferably in a popup and when submitted, hide/close the form.

[slimpens]

Hi,

You can add the button to a class, which is showed or hidden based on a condition . The button then can show a popup or something ( add details).

Check the video from
@tim.young to see how this can be done:

Build it with Tim - How do I use CSS classes with Display Rules? (Ep. 11)

Hey everyone This weeks Build it with Tim is how to use CSS classes with Display Rules to take your Form to the next level! In this episode, we’ll take a look at: The Form Component Display Rules Custom CSS classes [Build it with Tim - How do I use CSS classes with Display Rules?] Got a suggestion or wondering how to build something? Make sure to let me know here

[Peter]

Hi @richardch372 I have written about something similar, it is using TB.hideComponent:

Toggle button for open and close a form - hide/show with custom component

This is the result - a button to close and open a form Open form: [image] Close form: [image] On a detail page with a table of records, this is an alternative for the add record popup button The idea: have a form above the table component, which is hidden by default have a button which will open (show) the hidden form upon click the same button will close (hide) the form upon click reload the page upon saving the form Do that with a nice turning of the button How: custom component for …

[richardch372]

Thank you both, i’ll check these out.