Label Based Menu
This article describes the label based menu component and its properties.
The label based menu component allows for a set of related labels to be grouped. Label selection is mutually exclusive as only one label can be selected at any one time. The following example shows two label based menu components, one laid out vertically and the other horizontally:
Select Label Based Menu from the controls category of the component library. Move the mouse over the canvas and click to add a label based menu component to your project:
Label Based Menu Properties
The label based menu properties consist of GENERAL, DATA INSERTION, STYLING, INTERACTIVITY and a DYNAMIC VISIBILITY drawers. This guide will describe the general, data insertion, styling and interactivity properties only; the dynamic visibility properties are generic to each component and a separate guide and tutorial on dynamic visibility can be found here.
The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set property values article for more information on using the different methods.
- List Items – This property can only be set by binding to a range of cells in the spreadsheet. The number of labels in the label based menu will depend upon the number of cells that are bound to this property, the captions of the labels will correspond to the data in those cells.
- Ignore Blank Cells – Checked by default. If you bind the List Items property to a range of 10 cells, but only the first 8 contain data, then 8 labels will be added to the component. If this property is unchecked, 10 labels will be added to the component, but the captions of the last two labels (9 and 10) will be blank.
- Orientation – By default this property places the labels in a vertical line. Selecting Horizontal will change the same labels to a horizontal layout. (See the examples shown above.)
- Spacing – This property, measured in pixels, is the amount of space between each label item.
Data insertion is triggered when a label selection is made by the user. Data insertion is one of the core concepts within Squirrel, if you aren’t sure what it is, take a look at the Getting Started: Data Insertion tutorial for more information.
- Insert data by – Choose between the radio button options of Series Type or Filtering Rows:
- Series Type – If you select this option the label based menu component allows you to insert more than one series of data. This means that when a user selects an label, one or more series of data can be inserted into the spreadsheet. Series 1 could add Position data to a destination in the spreadsheet, and Series 2 could copy a whole row of data from the spreadsheet and paste it into a destination row, Series 3 could insert a label, and so on, all triggered by one selection from the label based menu.
- Series – This property lists all of the series for the label based menu component. Add a new series by clicking on the plus button above the property field. Delete a series by selecting it and then clicking the trash icon.
- Name – Rename the series if you wish by editing the name within the property field or by binding the name property to a cell in the spreadsheet. In both cases the name of the series in the Series property field will update accordingly.
- Type – Choose a data insertion type from the dropdown box. For more information about the types, take a look at Series Data Insertion in the Step-by-Step section of this article on Data Insertion.
- Source – If the type selected requires a source, this property will become enabled. Bind to a cell or range of cells in the spreadsheet that will supply the source data.
- Destination – Bind to a cell or range of cells where the data will be inserted.
- Filtering Rows – Selecting this option of the Insert data by property will change the appearance of the DATA INSERTION drawer. This option only allows for one series of data insertion to happen on selection of a label from the label based menu .
- Source – Select a range of rows as the source property.
- Destination – Select a row for the selected source row to be pasted into. If label 1 is selected from the label based menu, the first row will be pasted into the destination, if label 2 then the second row will be pasted in and so on.
- Refresh On Data Change – Enabled by default, this will apply any changes in the source data to data that has been already inserted into cells bound to the Destination property. Uncheck if you don’t wish this to happen.
The appearance of the label based menu component can be altered to suit a theme or particular style by using the STYLING properties.
These properties apply to the text of the labels in the label based menu component.
- Font – Choose a font style for the labels
- Size – Change the font size of the labels
- B I U – Use these toggle buttons (bold, italic, underline) to change the font format of the labels. When toggled to on, the button is blue:
- Text color – The labels will be shown in the colour that matches the value entered in the property field.
- Opacity – This determines the transparency of the labels.
- Padding – Changing the value of this property changes the amount of space between the label caption and its border.
These formatting properties apply to the background of the label based menu component labels.
- Fill – When checked, the background of each label will be filled with a colour that matches the value entered in the property field.
- Opacity – This determines the transparency of the background of each label. This is only available when the Fill checkbox is checked.
- Border – This property is checked by default. Set the border colour and opacity properties as desired. Uncheck to remove the border.
- Weight – This property determines the line thickness of the border in pixels.
- Corners – This property determines the corner radius of the border. Use the slider to amend this property, or type a numerical value into the property field.
These formatting properties can be used to apply a different style to any label that the mouse is positioned over.
- Hover Text Color – This property sets the text colour of the label that the mouse is positioned over.
- Opacity – This changes the opacity of the text.
- Fill – This property sets the background colour of the label that the mouse is positioned over.
- Opacity – This changes the opacity of the background.
These formatting properties apply to any selected label of the label based menu component.
- Selected Text Color – This property sets the text colour of the currently selected label.
- Opacity – This changes the opacity of the selected label text.
- Fill – This property sets the background colour of the currently selected label.
- Opacity – This changes the opacity of the background of the currently selected label.
A new label based menu component will by default not have any label initially selected. It is possible to make one of the labels selected by default.
- Selected Item – select Label or Position from the dropdown. Then bind the blank property field underneath to one of the following:
- Label – one of the cells containing the label captions previously bound to the List Items property. This will become the default selection. You cannot select more than one label by default.
- Position – a cell in the spreadsheet that contains a number equal to the label that is to be selected by default i.e. 1 will select the first label bound to the List Items property, 2 will select the second label and so on. Again, only one label can be selected by default.
DYNAMIC DISABLED STATE
It is possible to disable the label based menu component if you want to limit the user’s access to it.
Bind the Status property to a cell in the spreadsheet, and either add a value to the Value property or bind it to a cell containing a value in the spreadsheet. When the status property and the value property are equal, the label based menu component will be disabled. Leaving these two properties empty will ensure that the label based menu component is always enabled.