Creating a Dynamic Meta-Form Example (Using Form Designer)
1. Overview
This page outlines how to create a form using the form designer, a simple alternative for making your forms.
2. Prerequisites
Before creating a form, you must have the CLI package set up in your environment
You must also have installed and configured the Meta-Forms experience
3. Creating your Form
The form designer allows users to create new Forms using the Forms experience itself and is an intuitive and easy process.
In this example, a Contacts Form (Example Test) form will be created to pull information from the Contacts table.
Navigate to the Form Designer experience from the homepage (Image 1).
Open up the experience and it should look like this (Image 2):
To create a new form, click the Create New Record button on the left-hand navigation pane (Image 3):
![](https://platform.docs.cinchy.com/~gitbook/image?url=https%3A%2F%2F762429502-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Meab1e-ktEn2Oom7FZi%252Fuploads%252Fw3vrXn2vV7LgRC7NN4fG%252Fimage.png%3Falt%3Dmedia%26token%3D47ac2eba-0a33-4c12-a84d-558f3492b9d2&width=768&dpr=4&quality=100&sign=3279e812&sv=1)
In the Form Definitions section, fill in the following information and click Save once done (Image 4):
Table: This will be the table that you want to push/pull information to/from. In this example, we are pulling information from the Contacts.People table.
Name: The name of your form. In this example we have called it Contacts Form (Example Test)
Display Name: Enter a display name for your form. In this example we have called it Contacts Form (Example Test)
Lookup Label: This option will designate how you pull information from your assigned table. We have designated the Contacts.People.Name column from the Contacts table, in order to pull information based on a contact name.
Is Accordion: Select this checkbox if you want the form to open in accordion format or not.
Brand: Select a branding colour for this form.
Once your Form Definitions are set, the Form Sections tab will open (Image 5).
Click on the plus sign to add a Section Definition to your form (Image 6).
You can now add your Form Sections. In this example we are adding three sections: Profile, Contact Info, and Company.
Fill in the following information and select OK when done (Image 7):
Name: Add in your section name. In this example we are using Profile, Contact Info, and Company,
Sequence: Select the sequence that this section will show up on the form. 1 means it will show up first.
Columns in Row: Select how many columns you'd like to appear in the row. In this example we have chosen 1 for our Profile section, and 2 for our Company and Contact Info sections.
Auto-Expand: Check this box if you want to the section to auto-expand.
![](https://platform.docs.cinchy.com/~gitbook/image?url=https%3A%2F%2F762429502-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Meab1e-ktEn2Oom7FZi%252Fuploads%252FYpsvnX1Ce6HUW3pF71t0%252Fimage.png%3Falt%3Dmedia%26token%3D5ef4bc44-05ad-4c0f-a689-4901953e90d5&width=768&dpr=4&quality=100&sign=f75f7e1f&sv=1)
8. Click Save.
9. Within the Actions column of each of your sections, click on Design to navigate to the Form Section Designer.
11. Navigate to the Section Fields tab (Image 8).
![](https://platform.docs.cinchy.com/~gitbook/image?url=https%3A%2F%2F762429502-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Meab1e-ktEn2Oom7FZi%252Fuploads%252FYU1jpNaoa3Pl3toyxqos%252Fimage.png%3Falt%3Dmedia%26token%3D30d27ac1-dceb-44d5-be5c-6fbd5b53f01d&width=768&dpr=4&quality=100&sign=dfaf7955&sv=1)
12. Click on the + in the Fields tab to add a new Section Field. In this example, we are adding two fields to the Contact Info section of our form (since we designated it to have 2 columns per row in step 7).
13. Fill out the following sections and click OK when finished (Image 9):
Table Column: The column you want to pull from/push to in this field. In this example we have used Contacts.People.Email and Contacts.People.Work Phone.
Name: Select a name for your section. In this example we have used Email and Work Phone.
Sequence Override: You can choose to override the sequence in which this section appears on the form, with the section listed as 1 appearing first.
View Only: Check this box if you want this section to be viewable only.
![](https://platform.docs.cinchy.com/~gitbook/image?url=https%3A%2F%2F762429502-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Meab1e-ktEn2Oom7FZi%252Fuploads%252FOE7a6oZw4NS7xGiO4x0P%252Fimage.png%3Falt%3Dmedia%26token%3Db36b161c-9f79-4c8c-a016-a50bef43d836&width=768&dpr=4&quality=100&sign=30fe5f82&sv=1)
14. Click Save.
15. Navigate back to your Forms Table, click Open, and it will appear with your sections and fields (Image 10):
![](https://platform.docs.cinchy.com/~gitbook/image?url=https%3A%2F%2F762429502-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Meab1e-ktEn2Oom7FZi%252Fuploads%252FgXTTynXBv19C6Krngnm7%252Fimage.png%3Falt%3Dmedia%26token%3De3aca4e6-8c2a-4414-bdaf-323092f71754&width=768&dpr=4&quality=100&sign=e48dab7b&sv=1)
4. Adding Your Form to the Homepage
To add your form as an applet that users can quickly bookmark and access, navigate to the Cinchy Applets table.
In a new row, fill out the following information:
Domain: The domain that your form sits in.
Name: The name of your form/applet. In this example we use "Contacts Form (Example Test)".
Icon: Select an icon for the widget.
Icon Colour
Description: Add a description for your applet.
Target Window: Select if you want you form to open in a new window or not.
Application URL: Add in the URL to your form here.
Users and Groups: Add in which users/groups can access your form in these columns.
![](https://platform.docs.cinchy.com/~gitbook/image?url=https%3A%2F%2F762429502-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Meab1e-ktEn2Oom7FZi%252Fuploads%252F2WNsqJMUN6cLiewDwBuG%252Fimage.png%3Falt%3Dmedia%26token%3Ded7a8b13-982e-4529-ad45-6447ed968a81&width=768&dpr=4&quality=100&sign=19580be3&sv=1)
Last updated