Adding a Large Amount of Options to a Dropdown Menu

Adding a Large Amount of Options to a Dropdown Menu

If you have a very long list of options for a dropdown menu and it would not be practical to enter everything individually, the Sitefinity forms dropdown menu widget will accept a serialized list in the following format: 

["- Select -","Choice 1","Choice 2","Choice 3"]

There are opening and closing brackets, each item is between double quotes and separated by a comma.

To assist in creating this list, we can utilize Microsoft Excel.  

For this example, we'll use a list of the 50 US states.


Formatting Using Excel


1. In Excel, enter one list item per row in one column:




2. Select the range of cells, then right click in the selection and choose Format Cells




3. Under Category, click Custom: 




4. Under Type, find the @ symbol and select it:




5.  The @ symbol represents the data in the cell, so whatever you place around the @ will be added to the item within each cell in the column. 

In our case, we want it to look like this: 

\"@\",  

You can copy and paste the above formatting, or add the characters around the @ symbol manually.


Because Excel uses quotation marks as part of the syntax for formatting, in order to tell the system that we actually want the quotation marks to be displayed as text, we need to "escape" the quotation marks by adding a back slash ( \ ) in front of them.

You're given a preview to show you what you're doing in the Sample area. 




When you're ready, click OK. 




Now your column has most of the formatting required to add the list to a dropdown menu.  At this point we can add the list to the form, then add the opening and closing brackets.

6. Select the cells you want to use and copy. 




5. Create a form or edit an existing form.  Drag a Dropdown List widget into the form if you have not already, and edit the widget.

6. Click the Advanced button.




7. On the next screen, click the Model button.




8.  You will now see the default options in the Serialized Choices field.

Select the contents of the field, then paste in your list:




9. Place your cursor at the beginning of the list, making sure the list is de-selected, then add the opening bracket

[



10. Remove the last comma and add the closing bracket

]



11. At this point you can also choose to add a default placeholder such as "- Select -" etc.



Just make sure it follows the same format, and you have it enclosed with quotation marks.

DO NOT CLICK SAVE


12. Click the "Simple" button to return to the previous screen.




You will now see all of your list items displayed in the editor:



If necessary, you can re-order, edit or remove choices.



13. At this point, if everything is the way you want it, click save.






You can preview your dropdown menu within the form editor:



Finish up the form and Publish to save.


Formatting Using Google Sheets

If you don't have Excel, Google Sheets can do the same thing, and the process is very similar.

Paste your list into 1 column, select the column, then navigate to:

Format > Number > More Formats > Custom Number Format...





Now, you can enter in the same thing used for Excel in the field at the top of the window that pops up:

\"@\",




Type or paste in the characters, then click Apply, and the formatting will be applied to the selected cells.   You will not be shown a sample like in Excel, but the formatting will work.


​Video



    • Related Articles

    • Video: Adding Long Lists of Items to Dropdown Menus

    • Documents list

      The Documents list widget can display a list of files from a document library. You must have files already uploaded to a previously created library in order to use this widget.   You can display documents as a list or in a table format:   When you ...
    • Form Widgets

      Textbox Use this widget to give the user the opportunity to enter free text no longer than a line, such as street address, e-mail, etc. After you drag the Textbox widget in your form, click the Edit button in the upper-right corner of the widget. ...
    • Form widget

      Use this widget to display forms you have created with the form builder. You must have at least one form already created before using this widget.   For information on how to create a form, see the Forms in the Content section of the knowledgebase.   ...
    • Managing Form Responses

      When you create and publish a form on the website, the users can fill it out and submit their answers. The responses you get to a form are visible in the backend and you can see them via the Forms page.   To work with the responses collected from a ...