Multiselect element

Below you will find a short description of how to work with the new element, Multiselect.

• Form editor
• Element options
• Datasource
• Input
• Output
• Result handling
• Powershell hook input example
• Json hook output example

Form editor

Add the new element by dragging it from element list and dropping into to the form step in which it should be placed. 

Element options

The following element options are available to the new members element:
•	Datasourcehooks.
•	Required
•	Hidden
•	Hide in summary

Datasource
* A list of possible datasources, more on how to design one further down, for the element. Select from all available hooks.
Required
* As standard
Hidden
* As standard
Hide in summary
* As standard

Datasource

The datasource description is written assuming the desired datasource is a hook running a PowerShell script, either in the platform or on-premise.

Input

The following are the properties of the input to the datasource:
•	Locale
•	SearchText
•	Take
•	Skip

Locale
* The language code of the user’s current active language.

SearchText
* Is the text to filter the search.

Take
* The number of new items the element wants to load.
Skip
* The number of items the element wants to skip.

Output

The output from the datasource needs to be a JSON serialized object with the following propertie:
- items

Items 
List of items with the following properties:
•	id: A unique identifier. (Value is mandatory)
•	icon: An refrence to a https://fontawesome.com/icons Icon ex. 'fa fal-bat'. (Optional)
•	name: The items name. (Value is mandatory)

Result handling

The result from a Multiselect element is a JSON serialized data object with the selected items. The result has the same properties as the ones in the Items property described in the Datasource section.
Example:
"[{"id":1000,"icon":"fal fa-alicorn","name":"User_0"},{"id":1001,"icon":"fal fa-alicorn","name":"User_1"},{"id":1002,"icon":"fal fa-alicorn","name":"User_2"},{"id":1003,"icon":"fal fa-alicorn","name":"User_3"},{"id":1004,"icon":"fal fa-alicorn","name":"User_4"},{"id":1005,"name":"User_5"},{"id":1006,"icon":"fal fa-alicorn","name":"User_6"},{"id":1007,"icon":"fal fa-alicorn","name":"User_7"},{"id":1008,"icon":"fal fa-alicorn","name":"User_8"},{"id":1009,"icon":"fal fa-alicorn","name":"User_9"},{"id":1010,"icon":"fal fa-alicorn","name":"User_10"},{"id":1011,"icon":"fal fa-alicorn","name":"User_11"}]" 

Powershell hook input example

param($Inputs)
$skip = 0
if($Inputs.Skip){
$skip = $Inputs.Skip
}

$take = 10
if($Inputs.Take){
$take = $Inputs.Take
}

$searchText = ""
if($Inputs.SearchText) {
$searchText = $Inputs.SearchText
}

$users = LoadUsers();

$users | Where-Object { $_.name -Match $searchText } | Select -skip $skip -first $take | ForEach-Object {
$items += $_
}

 #ConvertTo-Json $items
 ConvertTo-Json  @{"items"=$items}

Json hook output example

            {
                "items": [
                    {
                        "id": 1000,
                        "name": "User_1000"
                    },
                    {
                        "id": 1001,
                        "name": "User_1001"
                    },
                    {
                        "id": 1002,
                        "name": "User_1002"
                    },
                    {
                        "id": 1003,
                        "name": "User_1003"
                    },
                    {
                        "id": 1004,
                        "name": "User_1004"
                    },
                    {
                        "id": 1005,
                        "name": "User_1005"
                    },
                    {
                        "icon": "",
                        "name": "User_1006",
                        "id": 1006
                    },
                    {
                        "icon": "far fa-hood-cloak",
                        "name": "User_1007",
                        "id": 1007
                    },
                    {
                        "icon": "",
                        "name": "User_1008",
                        "id": 1008
                    },
                    {
                        "icon": "far fa-hand-holding-magic",
                        "name": "User_1009",
                        "id": 1009
                    }
                ]
            }