Skip to content

Control Types

Parapets edited this page Jul 5, 2021 · 17 revisions

MCM Control Types

The following control types are available:

Empty

Empty controls are used to add empty space between other controls. They cannot be interacted with.

{
  "type": "empty"
}

Header

A header control shows a decorated title text. It can be used to group several controls together under a common category. Header options cannot be interacted with.

{
  "text": "Main Section",
  "type": "header"
}

Text

A text control displays a generic text/value pair. What you do with it, is up to you. Examples could be a text-based "On/Off" toggle or an uni-directional option stepper. You could also set up a text option for an "Uninstall" button.

{
  "text": "My text here",
  "type": "text",
  "help": "Displays a text/value pair.",
  "valueOptions": {
    "value": "My value"
  },
  "action": {                     // Optional. Allows you to make the control behave as a button.
    "type": "CallFunction",
    "form": "MCM_Demo.esp|800",   // Optional. Only required if using a different form than the config script.
    "scriptName": "MyScript",     // Optional. Only required if the specified form has multiple scripts attached.
    "function": "SetIntensity",
    "params": [50.0]
  }
}

Toggle

A toggle control displays a text label and a check box.

{
  "text": "Mod Enabled",
  "type": "toggle",
  "help": "Controls whether the mod is enabled."
}

HiddenToggle

A hiddenToggle is an ON/OFF control that is not displayed in the menu (and therefore does not advance the cursor). You can use it to have the value of a global variable or script property be a groupControl.

{
  "type": "hiddenToggle",
  "text": "Invisible toggle control, this will not be displayed",
  "groupControl": 2,
  "valueOptions": {
    "sourceType": "PropertyValueInt",
    "sourceForm": "MCM_Demo.esp|800",
    "propertyName": "pShouldEnableGroup2"
  }
}

Slider

Unlike the previous control types, slider controls are dialog-based. This means selecting the option won't immediately result in a setting change event, but instead a dialog is opened. The dialog prompts the user to choose a value within a specified range.

{
  "text": "Demo Slider",
  "type": "slider",
  "help": "A standard slider with constraints. Range: 0-1, Step: 0.01.",
  "valueOptions": {
    "min": 0,
    "max": 1,
    "step": 0.01
  }
}

Menu

A menu control is a dialog-based type as well. Selecting it will show a sub-menu with up to 128 entries. When the user selects an option, the selected value will be stored as a string.

{
  "text": "Demo Menu",
  "type": "menu",
  "help": "A menu allows a single selection from multiple choices.",
  "valueOptions": {
    "options": ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
    "sourceForm": "MCM_Demo.esp|800",   // Optional. Only required if using a different form than the config script.
    "scriptName": "MyScript",           // Optional. Only required if the specified form has multiple scripts attached.
    "propertyName": "pSelectedMenuOption"
  }
}

Additionally, unlike most controls, there is a special Papyrus function for altering the options displayed in a menu control at runtime.

; Dynamically override menu options via script.
; The supplied ID must refer to a menu control.
Function SetMenuOptions(string a_ID, string[] a_options)

Enum

An enum control is similar to a menu control, but its value is stored and retrieved as an integer indicating an index, rather than a string. Unlike the menu control, its options cannot be altered via script.

{
  "text": "Demo Enum",
  "type": "enum",
  "help": "An enum allows a single selection from multiple choices.",
  "valueOptions": {
    "options": ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"]
  }}

Color

A color option shows a color swatch dialog when selected. According to the SkyUI developers, they handpicked the best colors in the world for you to choose from. Colors are passed as 0xRRGGBB hexadecimal numbers. So 0xFF0000 is red, 0xFFFFFF is white, 0x000000 is black etc. The ColorComponent script provided by SKSE can be used to easily manipulate color values in Papyrus.

{
  "text": "Demo Color",
  "type": "color"
}

Keymap

A keymap control prompts the user to press a key have the option has been selected. It is not dialog-based, but it may display a confirmation dialog in the event of a conflict.

{
  "text": "Demo Keymap",
  "type": "keymap",
  "ignoreConflicts": false     // Optional. Defaults to false.
}

Input

An input control shows a text input dialog when selected, which allows the user to enter a text string with the keyboard.

{
  "text": "Demo Input",
  "type": "input",
  "valueOptions": {
    "sourceForm": "MCM_Demo.esp|800",   // Optional. Only required if using a different form than the config script.
    "scriptName": "MyScript",           // Optional. Only required if the specified form has multiple scripts attached.
    "propertyName": "pUserInput"
  }
}