The SharePoint data component allows you to easily display information from a data source in a drop down menu, this can include SharePoint lists, Excel files and much more!
Custom Template
The SharePoint drop-down component can also be customized to render a custom template for each item. This powerful feature gives you full control over what is displayed using standard HTML syntax. To use a custom component simply:
Open the data tab of your SharePoint data component
Under the "Label Property" field choose "🛠️ Custom". This will launch a HTML code widow to provide a custom template.
You can use this to display multiple fields from your drop down menu or style the items how you like. Below we provide two common examples of using the custom template feature.
Display Multiple Fields
Using the custom template feature you can display multiple fields/columns from your data source in a single item of the drop down menu. In the Example below we show how you can display a users first name, last name and position.
Item template:
<div>{{ item.firstName }} {{ item.lastName }}</div>
<small>{{ item.position }}</small>
Display Multiple lines
By default the SharePoint data component will display a single line of text for consistency of sizing and spacing among other components. However in some circumstances it may be desirable for the text inside the component to wrap over multiple lines to display a larger amount of text. In these situations you can use custom inline CSS in your template to force the text to wrap.
Item template:
<div style="text-wrap:wrap">{{ item.description }}</div>
