Auto-Suggest PCF
This PCF can be used across Microsoft’s Power Platform to provide an auto-suggest list on a text input.
The control uses a native browser feature called datalist #UseThePlatform so no need for additional libraries.
Power Platform already provides an auto-complete control but it limits the allowed results. This PCF will suggest a set of values but also allow the user to write new values, removing the need for an ‘other’ value and additional text input.
Find a Pet:
How it Works
Auto-Suggest PCF | 2021
This PCF controller appends a text input to the form with a ‘list’ attribute. It fetches data from an entity and appends a ‘datalist’ of ‘options’. Using this native browser feature will show a list of suggested values BUT also allow any value to be inputted.
Auto-Suggest PCF
We use the pac cli with a few lines of JavaScript to stub, edit, build and deploy the PCF:
- Create the PCF project
- Configure the Inputs and Outputs in the Control Manifest
- Find the Init hook where most the code will go
- Bind the inputs/outputs
- Create and append the new input element
- Fetch the data for the datalist using the input params which define the entity and column the options will come from
- Create and append the datalist element which should be bound to the input created earlier
- Bind the input to the selected value so it loads the current value and will update to any new user inputted value
- Build and Deploy