Introduction to using widgets

Use widgets in your spreadsheet to improve the functionality and appearance of the converted web page. This help page introduces you to widgets and their common features.

SpreadsheetConverter provides an extensive selection of graphical widgets that makes your web page more appealing and easier to use. Use  pre-formatted text fields, dropdown lists and calendars to improve the quality of an electronic form. Use Google maps and dynamically selected images to show your website visitors where you are, and what it looks like.

Screenshot of the Widgets tab of the task pane in version 9

Widgets are inserted in the spreadsheet from the Widgets tab of the SpreadsheetConverter task pane in Excel. Select the cell where you want to insert the widget; then select the type of widget from the task pane. An options dialog appears, in which you can specify the detailed settings for the widget.

Most widgets are fully visible only in the web environment, even though you manage them in an Excel spreadsheet. To review the visual appearance of a web page containing widgets, you must convert your spreadsheet for the web and verify the result in a web browser.

Widgets make the web page look better

In general, spreadsheets have a strict user interface. Often, it’s just letters and numbers arranged in rows and columns. When spreadsheets like these are converted to web pages, they look dreadful (we really should call them dreadsheets).

SpreadsheetConverter re-uses any existing graphical elements already present in your spreadsheets. An input field containing true/false values automatically becomes a checkbox, and a dropdown list created with Data > Validation > List becomes a dropdown list also in the converted web page.

To help you create a more appealing user interface, we took a step further and created a toolbox of user interface widgets that makes it much easier to use your calculator or web form:

  • Don’t write a date – pick one from a calendar.
  • Don’t list the things you need, tick the checkboxes next to the items you want.
  • Show an image of the wallpaper the customer is considering, in the selected color.
  • Use single- or multichoice menus for selection.
  • Use steppers or sliders to change a numeric value in real-time.
  • Use the Ratings widget to make it easy for your visitors to rate products or services.
  • Create an unlimited number of text fields in any size or shape you like.
  • Add a Google map to help people find your store.
  • Insert an e-mail button for those you want to contact you.

Special widgets for small touchscreens

When using a mobile device, it can sometimes be difficult to enter data with proper formatting. Many mobile devices offer optimized keyboards for special data types, e.g. a numeric keypad. Some browsers offer data entry templates like date pickers, and even provide syntax validation.

The Text widget can request that the user’s web browser provides additional assistance when entering certain types of input. Your mobile users will be grateful for this help.

Screenshot from the iPhone/Android flavor of the Month and Week widgets

The browser provides the user assistance

A word of caution, though: Although we can request this assistance from the browser, we cannot guarantee that the browser properly supports all input types, or that your users appreciate the help the browser is trying to provide. As an example, the full syntax for an e-mail address is very complicated and you can expect most web browsers to reject unusual but formally correct e-mail addresses such as john.smith(comment)@example.com or john.smith@[IPv6:2001:db8::1] while cheerfully approving obviously incorrect e-mail addresses such as john.smith.@example.com.

Users don’t like having correct input data flagged as incorrect by poorly tested web browsers. If possible, please test the advanced input types carefully before you implement them.

Examples of touchscreen widgets

  • E-mail address – “.com” and other top level domains may be added to the keyboard by the browser, and the e-mail address may be validated for proper syntax.
  • Telephone number – a special telephone keyboard may be provided by the browser, and the field contents may be validated.
  • Month – a date picker for year and month may be provided by the browser in the default language and regional format set for device.
  • Week – a date picker for year and week may be provided by the browser in the regional format set for device.
  • Number – a numeric keypad may be provided by the browser, and non-numeric content in the field may be flagged.
  • Date – a date picker may be provided by the browser in the default language and regional format set for device.
  • Time – a time picker may be provided by the browser in the regional format set for device.

Insert widgets

The Widgets tab of the task pane contains all the widgets available in your flavor of SpreadsheetConverter. If you have a license for more than one flavor, always remember to select the flavor you will convert with before you start adding or editing widgets. That way you get the widgets and settings that are appropriate for the flavor you will be using when you convert the spreadsheet to a web page.

To insert a widget in a cell. select the cell where you want the widget to appear, then click on the widget in the SpreadsheetConverter task pane (if you don’t see the task pane, use Excel’s menu to show it: SpreadsheetConverter > Task Pane > Show). A settings window appears to let you set the options for the widget you have selected, e.g.:

  • For dropdown lists, listboxes and radio buttons you enter the various different choices that the user can choose from.
  • For sliders and star ratings, you set the range of values, e.g. 0-100 for a slider or 1-5 stars for a rating.

If you later need to modify these settings, just select the cell again and the the settings page for the cell’s widget will appear in the task pane.

Widget defaults

Many of the widgets have an initial value by default. You can usually override the default initial value by inserting a value in the cell of the spreadsheet in which you placed the widget, so if you type Hello into a cell that contains a Text widget, the widget will initially have that value, too.

When the form is converted to a web page and opened in a web browser, most widgets are open for user input. The person that is using the form can override the initial values by changing the value of each widget.

We have tried to document the default value for every widget, but here is a summary:

  • Text: empty, override by typing a value into the spreadsheet cell.
  • Slider: the minimum value for the slider, override by typing a value into the spreadsheet cell.
  • Stepper: the minimum value for the stepper, override by typing a value into the spreadsheet cell.
  • Rating: 0, override by typing a value into the spreadsheet cell.
  • Calendar: the current date, override by typing a date into the spreadsheet cell, or removing the default altogether.
  • Check box: FALSE (unticked), override by typing TRUE into the spreadsheet cell.
  • Radio buttons: the first choice in the list, override by moving one of the other choices to the top of the list.
  • Dropdown: the first choice in the list, override by moving one of the other choices to the top of the list.
  • Utility: the value returned by  the formula in the cell.

Pre-fill form fields from the link

You can pre-fill many form fields from the link to the form. As an example, if the link to the form contains a language code (/form.htm?lang=sv), it will be preserved by the form if your form has a text field named lang, and it will be forwarded with the form when the form is submitted for processing.

Read more about filling form fields from the link.

Common settings

Required

Some widgets can be set as Required, meaning that the user of a web form must do something with the widget before the form can be submitted. Here are some of the actions required by the user for the most common widgets, when they are set as Required:

  • Text: must enter text.
  • Radio buttons: must “press” one of the buttons.
  • Dropdown: must move the menu away from the option that is selected by default.

Hidden

Developers use Hidden fields when they want a cell to be visible in the spreadsheet, but not in the converted web page. This allows them to provide information in the form without showing it in the form. As an example, if you use a cell to keep track of how long it took a user to fill in a form, you may want to hide this calculation. Even though a field is hidden, it’s contents are forwarded with the form when the form is submitted for processing. It is also common that developers use hidden form fields when pre-filling content from the link (see above),

Field name

You must assign a name to a widget if you want to pass data into it from the link to the form (see above). For electronic forms it is also much easier to process the form if all input fields have names. You can name your fields in the widgets or give them cell names in Excel. Widget names can start with numbers or an underscore, which is required when integrating with products like Salesforce.

Make widgets look good

Merge adjacent cells

Widgets use the same row/column layout as the rest of the spreadsheet. Many of the widgets may require more space than the default row height and column width in Excel.

As an example, if you use a dropdown list, a listbox or radio buttons to select a city or state name from a list, you probably want the widget to be wide enough for the longest name in the list. If you don’t, SpreadsheetConverter must either wrap the longer names over more than one line (e.g. for radio buttons), or truncate the names after the allotted width (e.g. for dropdown lists).

If a widget is too big to fit within its cell’s height and width, the corresponding row and/or column may be widened automatically, depending on the web browser. This will probably harm the layout of your spreadsheet in an unpredictable way.

To make room for a large widget you can use Excel’s own Format Cells command to merge the cells in a cell area into one. First select all the adjacent cells you want to merge, then right-click somewhere in the area and select Format Cells…. On the Alignment tab, check the Merge cells option. This will create one big cell from all the cells you selected. Adjust the horizontal and vertical alignment if necessary.

In the example below, four columns and three rows, in total twelve cells, were merged for the Address multi-line text widget.

Screenshot of an address field created by merginc cells.

Remove a widget

To remove a widget, select its cell and click Remove on the widget’s setting page.

If the cell still isn’t empty, it may contain a default value or a comment. Right-click in the cell and select Clear Contents from the menu to clear the cell.

Finally, since we use Data Validation for some widgets, you may also have to go to Excel’s Data tab, locate the Data Validation settings and click Clear All and then click OK.

Known issues

You can move widgets, but you can’t copy them

You can move a widget to a different cell using cut-and-paste or drag-and-drop.

Copying the cell in which a widget resides will only copy the cell’s contents, not the widget or it’s settings.

The Dropdown, Dynamic Dropdown and Radio button widgets are partly defined as Data Validation Lists in Excel. If you try to copy one of these widgets you will copy the data validation list setting in Excel, which will always be converted as a standard dropdown.

Widgets that use image placeholders like Link Image and Google Map may appear to support copying, but you are still not copying the actual widget, only making a twin of its image placeholder. All these twin placeholders will always show identical content, since they are controlled by the same widget.

Learn more

Descriptions of the widgets in the desktop flavors

Descriptions of the widgets in the iPhone/Android flavor