Editing a User's CRM record Front End with Custom Field Sets and CRM Custom Fields

all forms allow users to edit their details in the crm this includes all standard fields like "name" and custom field sets introduction all forms allow users to edit their details in the crm this includes name any custom field sets attached to the form use these to store information that you want to keep up to date learn more about editing email and password here standard form fields are stored against the case only and are not stored against the crm record this article will show how to output custom field set data in the form show how to display any existing data in the form so the user understands that they are editing data explain the process siteglide takes with user data when a form is submitted how crm editing works the flowchart diagram below demonstrates an abbreviated summary of what happens when a form is submitted on siteglide where the diagram mentions custom field sets, the newer crm custom fields feature is applicable as well the most important points to draw from this are all forms will create a case and all fields submitted will be shown in the case but only the following fields will update the crm custom field sets attached to the form crm custom fields the user's "name" field the email field (on first submission only) this is used as a unique identifier in the crm the "edit email" and "edit password" fields learn more about editing email and password here when using custom field sets and crm custom fields to update the crm, it doesn't matter whether or not the user already exists in the crm, or whether or not the user is already logged in adding custom field set fields to a form see here for a more detailed explanation of adding custom field set fields to a form in summary, to add custom field set fields to a form, you'll need to create a custom field set (or choose an existing one) attach the custom field set to a form in admin you can mix & match different kinds of fields here check that the liquid for this field is included in the form layout add your form to a page with the chosen layout custom field set field syntax in the form's layout if you use a default form layout, then attaching the custom field set to the form will automatically add the fields to the layout if using a custom layout, we recommend you copy and paste the code from the default layout to your custom layout before editing it here is an example of a custom field set field added to the layout favourite colour note the data cfs attribute which gives you a clue this is a custom field set field and will therefore submit to the crm record adding crm custom fields to the form crm custom fields work in a similar way to custom field sets, but instead of operating as a group of fields, they can be added to the form individually one advantage they have over custom field sets is that they use slightly less database records in your usage metrics see here for a more detailed explanation of creating crm fields https //help siteglide com/article/205 crm getting started https //help siteglide com/article/205 crm getting started in summary in crm, custom fields tab, create each custom field you need attach the crm fields to a form in admin you can mix & match different kinds of fields here check that the liquid for these crm fields is included in the form layout add your form to a page with the chosen layout crm custom field syntax in the form layout as with custom field sets, the syntax for adding crm custom fields to your form is automatically added to the form's default layout you may need to run a pull command if you are using siteglide cli to get any new changes to your default layout if using a custom layout, we recommend you copy and paste the code from the default layout to your custom layout before editing it here is an example of a crm field added to the layout html shipping address line 1 note the data crm attribute which gives you a clue this is a custom field set field and will therefore submit to the crm record the id in the data attribute refers to the crm field's id in the crm; it is different from the id in the name attribute, which refers to the field's id in the case displaying current field values for logged in users prerequisites the user must already be signed up to any secure zone the user must be logged in why is pre filling fields useful? it's extremely useful to display the current values in the fields on page load this shows the user the data that is already stored and allows them to make a decision about whether the data needs to be changed an alternative using graphql to fetch crm data before we show you the user details method which uses a low code approach, we should note that the graphql users query provides a more flexible approach to fetching user data, including fetching details of users who are not logged in you can learn more about how to use graphql queries here https //developers siteglide com/tutorial overview https //developers siteglide com/tutorial overview using user details to fetch crm data steps in order to fetch the existing custom field set data for the current user, they'll need to be logged in this means they'll need to have already completed a sign up form to any secure zone and set up a password you may find it helpful to build an onboarding flow with two separate to achieve this, you can combine two siteglide features by nesting a siteglide form inside a user details layout step 1) user details contain the existing cfs data to fetch the existing cfs and crm data for the current user, you'll need a user details layout {% include 'user details', layout 'user details edit form container' %} parameters layout choose a layout from the following folder in code editor layouts/modules/module 5/user details/ step 2) place the form inside user details the user details layout has direct access to custom field set data, but normally the form does not in order to achieve this, we place the form inside the user details layout due to liquid inheritance, the custom field set data will then be available inside the form output your form by writing the code for the form inside this user details layout instead of directly in the page e g {% include 'form', id '10', layout 'custom' %} step 3) use liquid to prefill the html values this will allow you to access the existing user data and their related custom field sets within the form in this example, we have a custom field set "checkout address" with a "profile picture", a favourite colour and a country field {{this custom field sets\['checkout address']\['favourite colour']}} {{this custom field sets\['checkout address']\['country']}} {{this custom field sets\['checkout address']\['profile picture']}} see https //developers siteglide com/user details#squs1 https //developers siteglide com/user details#squs1 to see how to access data from crm custom fields within the user details layout as the value attribute in html determines the pre filled value of a field, we can use liquid to add it in most cases, there is an \<input> element which can be given a value, eg in the "favourite colour" field values can also be added to \<select> elements country uk usa canada australia new zealand file and image fields are more complex, each has two elements a type="file" and a type="hidden" field if you wish the file upload to have validation, both the value attribute and required class should be added to the type="hidden" input this is because this is the field that actually has a name attribute and sends to the database profile picture this adds the value to the field, but for the profile picture, i may also want to show a larger preview of the image outside the field you can use the same liquid to display the image, using the asset url filter to complete the path attributes style="background image url('{{this custom field sets cfs 3 properties cfs field 3 1 | asset url}}');" this liquid would allow the existing image to be displayed on page load data file preview="form field 10 1 file" this sets up the element to preview the next image a user uploads to this field read more here file upload previews multiple parts to the form you may wish to split your fields into multiple "user profile" sections where the user can enter a set of fields, save and then move to another section to keep the cases tidy for multiple forms and be most efficient with database usage, you can optionally use a single admin form a single custom field set multiple form layouts, each displaying alternative sub sets of fields (name and email can be pre filled using html, to prevent asking logged in users for this information multiple times in the flow ) this will mean that cases for each part of the form will still be collected in the same location in admin, but you can use the form layouts to control which fields are displayed in each view all forms must include the user id and email fields, but if you want to hide these from the sections which are not visible, you can give these type="hidden" so that they are not seen in the sections which do not require them you can auto fill their values using the steps in the previous section