When using a SharePoint data component, all columns associated with the selected item are also included in the response, not just the field that appears in the label. This feature allows you to easily access other fields and columns to populate other fields within your form.
For instance, let’s consider a SharePoint list with columns like “Title,” “Name,” “Email,” and “Department.” This list is used to populate a SharePoint drop-down menu, which displays the “Name” column. However, it’s important to note that while the drop-down list only shows the “Name” column, all other columns are also stored in the response.
You can preview the data object’s contents at any time by navigating to the “Preview” tab on the form builder screen and clicking the “{}” button. This will display the raw JSON response, enabling you to easily visualise how the data is structured and aiding you in understanding how to access specific fields.
Populating a Textfield
Setup your SharePoint data component
Drag and drop a text field into your form and navigate to the data tab
Under "Calculated Value" use an expression to set the value based on the SharePoint drop down. You can use the property accessors to access other fields/columns associated with the selected SharePoint item.
Here is an example, however you will need to update the expression for your specific form and available fields/columnsvalue = data.spSelect.Department
Populating a Content Component
Setup your SharePoint data component
Drag and drop a content component into your form
Within the content you can dynamically reference the SharePoint drop down by placing any JavaScript between curly brackets as shown below
Name: {{ data.spSelect.Name }}
Email {{ data.spSelect.Email }}
Department: {{ dat.spSelect.Department }}
Populating a HTML Component
Setup your SharePoint data component
Drag and drop a HTML component into your form
Within the html content you can dynamically reference the value of the SharePoint drop down by placing any JavaScript between curly brackets as shown below. In the example we dynamically construct a hyperlink based on the users email.
<a href="mailto:{{ data.spSelect.Email }}"> {{data.spSelect.Email}} </a>
