Skip to content

sc-menu

go-to-typical-definition

sc-menu-example-1

1 Purpose

This document is a user guide for the sc-menu component as of version 7.6.2

Sc-menu standardises a menu drop down component for formbird. The component allows ....

The sc-menu definition provides fields for setting the properties of the menu dropdown and is fully described below.

2 Definition

Sc-menu is defined by a set of name/value pair fields consisting of:

  • Required system fields
  • Required customizable fields
  • Optional customizable fields

Note:

  1. Default values for fields described in the tables below are shown in bold text.

2.1 Required System Fields

Field Valid Values Description
componentName sc-menu The component name.

Example:
"componentName": "sc-menu"

2.2 Required Customizable Fields

Field Valid Values Description
name Any value written in camel case. Defines the name of the field in the document and database.

Example:
"name": "testScMenu"

2.3 Optional Customizable Fields

Field Valid Values Description
colour html color string The colour of the menu button. Can be any html color string
Defaults to purple (#160d2a).
Example:
"colour": "green"
`"colour": "#ff6347"
dropColour html color string Background colour of the drop down. Can be any html color string
Defaults to white.
Example:
"dropColour": "green"
"dropColour": "#ff6347"
dropTextColour html color string The colour of the drop down text. Can be any html color string
Defaults to black.
Example:
"dropColour": "green"
"dropColour": "#ff6347"
dropWidth string Defines the width of the drop down. Can be one of two settings: "align" or "full". Align opens the dropdown at the same width as the drop down. Full opens the drop down to the max width of the text in the drop down. Defaults to align.
Example:
"dropWidth": "full"
enabled false The note box field is greyed out.
A Stop icon appears on mouseover.
A value cannot be entered in the field.

Example:
"enabled": false
true Default value. A value can be entered in the field.
fullWidth true The field displays full width on the form.

Example:
"fullWidth": true
false Default value. The field does not display full width on the form.
height integer The height of the component in pixels.
Example:
"height": 100
75 Default value.
items Array Menu items array that provides both the url and the display name. Must be an array of items with the following format...
Example:
"items": [{"label": "Example Label 1", "url": "/form/f1fe21c8-ce35-40f1-ab91-93b7919fbed3"}]
label Any value Defines the text on the dropdown on the form i.e. the field label.

Example:
"label": "Test sc-menu dropdown"
Defaults to the field displays without a field label on the form.
mandatory true The note box field displays as mandatory (i.e. label in red text with an asterisk).
Saving without a value, a message prompts the user to enter a value for the note box field.

Example:
"mandatory": true
false Default value. The note box field displays as optional (i.e. label in black text).
openType String How the component opens the dropdown. Can be one of two options: "click" or "hover".
Defaults to "click".
Example:
"openType": "click"
textColour string Text colour for the dropdown menu. Can be any html color string
Defaults to white.
Example:
"textColour": "green"
"textColour": "#ff6347"
textSize Integer Text size for the dropdown menu. Can be any integer greater than 0.
Defaults to 16.
Example:
"textSize": 30
urlTarget string String that defines where the url is opened. Must be one of "newWindow" or "current".
Defaults to "newWindow"
Example:
"urlTarget": "newWindow"
visible false The menu drop down is not visible on the form.

Example:
"visible": false
true Default value. The menu drop down is visible on the form.
widthType string Determines how the drop down wraps around the text. Can be one of two types, "block" or "contained". Defaults to block.
Example:
"widthType": "block"

3 Typical Definition

Below is a typical sc-menu definition, defined with its required fields plus any optional field whose value is typically other than its default value.

{
    "componentName": "sc-menu",
    "items": [
        {
            "label": "First option",
            "url": "/form/f1fe21c8-ce35-40f1-ab91-93b7919fbed3"
        }
    ],
    "label": "Example sc-menu component",
    "name": "exampleMenu"
}

One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.

    "mandatory": true,
    "enabled":false,
    "visible":false,
        "items": [{
                    "label": "First option because you am cool",
                    "url": "/form/f1fe21c8-ce35-40f1-ab91-93b7919fbed3"
              }],
    "textColour": "red",
    "widthType": "block",
    "colour": "pink",
    "dropColour": "grey",
    "dropTextColour": "white",
    "openType": "hover",
    "urlTarget": "newWindow",
    "textSize": 20,
    "dropWidth": "full",
    "height": 100

4 Examples

Example 1

Below is a typical sc-menu definition, defined with its required fields plus any optional field whose value is typically other than its default value.

{
    "componentName": "sc-menu",
    "enabled": true,
    "label": "Drop colours Menu",
    "name": "dropMenu",
    "items": [
        {
            "label": "First option because you am cool",
            "url": "/form/f1fe21c8-ce35-40f1-ab91-93b7919fbed3"
        }
    ],
    "textColour": "pink",
    "dropTextColour": "pink",
    "dropColour": "black",
    "colour": "black"
},