Creating a Record

we will now create a jig with a form that creates a record with multiple columns in our dynamic data table, which we defined in the previous forms docid\ v 2q usb3czeifaxt1ih part creating a jig first, we create an empty jig and call it form jigx delete the datasources section, as we don't need it now form jigx title form description my first from by jigx type jig default children \ adding a form to the jig we need to add a form component to our jig, as it will be the container for the form input components go ahead and use intellisense ( ctrl+space ) to add a form https //docs jigx com/examples/form component to the children option of your jig note the empty instanceid option this is the unique identifier of your form set it to simple form as we need it later to submit the form form jigx title form description my first form by jigx type jig default children \ type component form instanceid simple form options children \ adding form input components to the form you can now go ahead and add the first input field to your form use ctrl+space to add a text field https //docs jigx com/examples/text field to the children option of your form component two options are important for every form field instanceid this is the unique identifier of each form input component and it will be used later to retrieve the field values using state docid\ ryyvriex8qajljhrdx7fg set it to firstname label the label will be displayed on the actual component ui and is important for user interaction keep it simple and descriptive set it to first name form jigx title form description my first form by jigx type jig default children \ type component form instanceid simple form options children \ type component text field instanceid firstname options label first name please note it's best practice for mobile forms to be as short and simple as possible! no one wants to fill out dozens of fields on a mobile device because of this, all jigx input components are marked as required (option isrequired ) by default if you want to make a field optional set isrequired to false, but ask yourself if you then really need that field on your form next, add some more fields to your form note that for the email and phone fields we specified an additional option, called keyboardtype this will present the devices onscreen keyboard in the right mode you can use ctrl+space to see all available types go ahead and create a form with this yaml form jigx title form description my first form by jigx type jig default children \ type component form instanceid simple form options children \ type component text field instanceid firstname options label first name \ type component text field instanceid lastname options label last name \ type component email field instanceid email options label email keyboardtype email address \ type component number field instanceid phone options label phone number keyboardtype number pad submitting the form data good job! now that we have the basic structure of our form in place we can start thinking about how to store its data in general, there are two main ways of sending a form's data back to your data store submit form action this is the standard approach for submitting data to your data store choose this one if your form just needs to create or update data in a single table execute entity action if you need more control about how and where to send your form data, select this action type keep in mind that it requires you to understand state docid\ ryyvriex8qajljhrdx7fg to access the field values submit form now we will add a submit form action to our jig the action will automatically display an action button at the bottom of the jig and take care of sending the data to a dynamic data table go to the root indent level of the jig and use ctrl+space to bring up intellisense pick actions now, use ctrl+space again to add a submit form (create) action now we need to set our submit form action to the form component formid remember that we set the identifier of our form component ( instanceid ) to simple form earlier we will use this identifier to connect our action to the form set formid to simple form , you can use ctrl+space for this as well provider as we want to store our form data in a dynamic data table, we can leave this value as is title the title will be displayed on the action button at the bottom of our jig set it to submit form entity this is the entity table that will be used to store the data use ctrl + space to select the default/form table we defined at the beginning of the guide method we want to create a new record, therefore we leave this value set to create go back after the record is created, we want to navigate back to the previous screen note that there are more options available our yaml looks like this now form jigx title form description my first from by jigx type jig default actions \ children \ type action submit form options formid simple form provider data provider dynamic title submit form entity default/form method create onsuccess type action go back children \ type component form instanceid simple form options children \ type component text field instanceid firstname options label first name \ type component text field instanceid lastname options label last name \ type component email field instanceid email options label email keyboardtype email address \ type component number field instanceid phone options label phone number keyboardtype number pad execute entity the execute entity action allows for more control over how your data is stored for instance, you could transform the lastname value to uppercase, or combine firstname and lastname into one column before saving it also you could add multiple forms to one jig and store data from both or access forms of jig composite https //docs jigx com/examples/jigcomposite children from the composite jig action as you can see in below example, the action exposes a data option that allows you to specify each column that will be used in the payload each column value can be bound to an expression and state of your components in this example we are accessing state for each field (remember, ctrl+space is your best friend) it's very helpful to learn more about state docid\ ryyvriex8qajljhrdx7fg in general when using this type of action you could also use jsonata expressions docid\ gsvs1zswrgpc0ewjvpihm to transform the state values before binding them to the columns an example for this would be lastname =$uppercase(@ctx components lastname state value) form jigx title form description my first form by jigx type jig default actions \ children \ type action execute entity options title submit form provider data provider dynamic entity default/form method create data firstname =@ctx components firstname state value lastname =@ctx components lastname state value email =@ctx components email state value phone =@ctx components phone state value children \ type component form instanceid simple form options children \ type component text field instanceid firstname options label first name \ type component text field instanceid lastname options label last name \ type component email field instanceid email options label email keyboardtype email address \ type component number field instanceid phone options label phone number keyboardtype number pad adding a widget to home hub now let's head over to the index jigx fiel of our solution to add a widget for the home hub that takes the user to our form index jigx title first form category personal tabs home jigid form icon home apps logo publish your solution now, so that you can try it out on your mobile device 🎉 remember, that you always check out the contents of your dynamic data form table in the https //manage jigx com https //manage jigx com jigx management navigate to the solutions area in the left sidebar, select your solution and check out the data section in the sidebar next see how to updating a record docid\ mkyrj3k9silprz8njx7kv for more examples on formatting your form see https //github com/jigx com/jigx samples/blob/main/samples/jigx samples/jigs/components/form/simple form submit jigx https //github com/jigx com/jigx samples/blob/main/samples/jigx samples/jigs/components/form/simple form submit jigx github