Configuration
Adding user configured settings to your widget
Last updated
Adding user configured settings to your widget
Last updated
Every widget by default has a configure action when you right click the widget called MyWidget Settings.... By default it will contain a form to set a global shortcut to activate your widget.
main.xml is where you define the properties that will be serialized into ~/.config/plasma-org.kde.plasma.desktop-appletsrc. All properties will be accessible with plasmoid.configuration.variableName regardless of what group it's in.
Int for an Integer number
Double for a double precision floating point number (Real)
String for a string of characters to represent text
Color for a hexadecimal color. The color defaults to #000000 (black) if the default is left empty.
Path is a string that is specially treated as a file-path. In particular paths in the home directory are prefixed with $HOME when being stored in the configuration file.
StringList for a comma separated list of Strings
I personally don't recommend using Color if you want to default to a color from the color scheme (eg: PlasmaCore.ColorScope.textColor). I would instead suggest using a String that is empty by default. You can then use the following in the QML:
contents/config/main.xml
config.qml is where we define the tabs in the configuration window.
We import the ConfigModel and ConfigCategory, and define the tab name, icon, and qml file that will be loaded. {{< /section-left >}} {{< section-right >}}
contents/config/config.qml
configGeneral.qml is where we can place all the checkboxes and textboxes.
Please note that your should not use PlasmaComponents.* controls in the config window, as those are styled and colored for the panel. The normal QtQuick.Controls are styled using your application window style + colors.
Kirigami.FormLayout is used to layout the controls in the center of the page. The Kirigami.FormData.label attached property is used to place labels in front of the controls. Kirigami labels are optional, so you do not need to use them for CheckBoxes which have their own labels on the right.
contents/ui/configGeneral.qml
By default, all values are copied to the top level Item of the file prefixed with cfg_ like page.cfg_variableName. This is so the user can hit discard or apply the changes. You will need to define each cfg_ property so you can bind the value with a QML control.
contents/ui/configGeneral.qml
contents/config/main.xml
contents/ui/configGeneral.qml
contents/config/main.xml
contents/ui/configGeneral.qml
contents/config/main.xml
contents/ui/configGeneral.qml
contents/config/main.xml
contents/ui/configGeneral.qml
contents/config/main.xml
contents/ui/configGeneral.qml
contents/config/main.xml
I personally don't recommend using the Color data type in main.xml if you want the default color to be a color from the color scheme (eg: PlasmaCore.ColorScope.textColor). I would instead suggest using a String that is empty by default. You can then use the following:
contents/ui/configGeneral.qml
Note that we place the Kirigami.FormData.label in the RowLayout as it is the direct child of Kirigami.FormLayout.
contents/config/main.xml
contents/ui/configGeneral.qml
You can also assign directly to plasmoid.configuration.variableName if necessary in the configuration window or anywhere else in your widget. If you do this in the configuration page, you will skip the "apply" process and the property will be applied right away. I leave this up to the reader whether this is a pro or con.
contents/ui/configGeneral.qml
To learn by example, we can look at a couple widgets:
Application Launcher
Task Manager
Zren has written a few files that apply the above pattern of skipping "Apply" and updating right after you change the value.
contents/ui/libconfig/CheckBox.qml
contents/ui/configGeneral.qml
has a variety of data types:
I've listed the more common use cases. More can be found in .
Note that you can use a property to a control's property like checkBox.checked or textField.text.
A is used for boolean on/off values.
A is used for numbers.
If you want decimal places, a is a little easier to use than the QtQuick.Controls 2.0 version. QtQuickControls1 has a SpinBox.decimals to easily switch from an Integer decimals: 0 to decimals: 3 to represent a Real number (the Double data type).
If you want decimal places, a is a little easier to use than the QtQuick.Controls 2.0 version. QtControls1 has a SpinBox.decimals property to easily switch from an Integer decimals: 0 to decimals: 3 to represent a Real number (the Double config data type).
If you really want to use QtQuick.Controls 2.0, look at Zren's for an example on implementing the decimals property.
A is used for a single line of text. It can be used as a base for many other data types as well. You will also want to look at the base for more properties.
A is used for paragraphs of text. You will also want to look at the base for more properties.
KDE Frameworks has which provides a preview of the selected color and will open QtQuick's for selecting a color.
Unfortunately KDE Framework's ColorButton doesn't easily support this pattern as it stores the value in a QML color property which will read the empty string and cast it as the default color #000000 (black). I worked around this issue in the [No-Apply Control Library]({{< ref "#no-apply-control-library" >}})'s . I used a TextField to store the value as a string, and displayed the default color scheme color as placeholderText.
When we need to store a filepath in the config, we should use the Path or PathList config type. It will substitute /home/user/... with $HOME/.... To properly layout the file selector, we need a RowLayout with a TextField and Button which opens a . We can specify the default folder the dialog opens to with FileDialog's (eg: shortcuts.pictures).
makes it easy to search and preview icons.
See the [configurable icon example]({{< ref "examples.md#configurable-icon" >}}) for an example of based on the Application Launcher's (aka kickoff) .
for on/off booleans values.
for use with a String or Color config data type. If you use use a String data type, you can treat an empty string as a certain color theme color. Eg:
is useful for creating enums using the String config data type. KConfig comes with a enum datatype as well, but you have to either use hardcoded integers (with comments), or in your QML code and keep it in sync. String comparison is less efficient but is easier to program with.
inherits ComboBox.qml and is populated with all available fonts.
based on the Application Launcher icon selector.
takes a similar model as ComboBox.qml but will display the options as .
for Integer or Real numbers.
for use with an Int config data type. It has your typical 4 buttons for left/center/right/justify alignment. It serializes the Text.AlignHCenter enum.
is used to toggle bold, italic, underline, and embeds the text alignment. For use with 3 Bool config keys and 1 Int config key (used for the embedded TextAlign.qml).
for a string with multiple lines of text.
overloads TextArea.qml's valueToText(value) and textToValue(text) functions to treat a new line as the separator for the StringList type.
for a single line of text.
