Interactive List Seach

I want to create a public form that allows for an interactive search of a list of ~350 products. The goal would be to allow the user to create an order.

I would like our entire product catalog available to be searchable. The form would include a search box that the user can enter a search criteria. This would then display to the user the subset of products that matches the search criteria. The user could then choose what products they want to add to their order from that filtered list. The list of ordered products would be dynamic and allow them to remove items previously added before submitting.

I am trying to determine whether that functionality can be created with the fields/controls provided in the public forms platform. It doesn't seem to me that the current controls/fields would allow that functionality, but I wanted to check before I go look for other options.

Hello @kfarren,

Where do you store the product list?

You can retrieve data from Dynamics 365 Business Central or SharePoint Online list data via Azure Function and use it in the public web form, for instance, as a source data for the drop-down field as described here.

To store the list of products that the user wants to order you can use DataTable control. And you can create a custom button to add selected products to the control.

Thanks for the information. Our list is relatively small (350 items). My intention was to store the product information in a multi-dimensional array. I will look into pulling the data from Office 365.

I looked through documentation & code examples, but didn't see options of how I can dynamically add entries to a data table through java. Can you provide an example code for adding entries to a data table?

@kfarren,

You are welcome!

For instance, you have a Drop Down field with the list of products and Number field to enter the required quantity.

You can add a custom button to the form and add the code below to the button's Click settings to add a new record to the DataTable.
image

// add new record to the DataTable, use columns' InternalNames:
var record = {Product: fd.field('ProductList').value, Quantity: fd.field('Quantity').value};
fd.control('DataTable0').value.push(record);

You can find more information about JavaScript framework of the DataTable control here.