Qt World Summit: Submit your Presentation

QML Designer Custom Properties

  • Hello,

    i couldn't find anything using google, so i'll just ask it here. If i create custom Components using custom Properties, is it possible to have this properties in the QML Designer below the property section on the right?

  • Hi,

    Not they i know, and it would indeed be a nice feature!

    I created a suggestion on Jira!

  • Hello stevenceuppens,

    currently i am using custom designer templates for that. I will write you a tutorial on how to accomplish that in a few days because i have no time at the moment. You have to manually point to the variables/properties so this isn't done that quickly and also design the layout by yourself.

    Even the QtCreator and Designer itself uses .qml files for that.

  • Hey,

    you'll have to create a folder named "designer" as a subdir of your custom Component. If your Component is in for example a folder named "MyComponents", then it would be "MyComponents/designer". In that folder you have to create a qml-file with the name of your Component-qml file and add "Specifics" at the end of the name. If Your Component is named "MyButton.qml", the file to create would be "designer/MyButtonSpecifics.qml".

    The QtCreator Designer automatically reads the Specifics files.

    Please look up "...\Qt\Tools\QtCreator\share\qtcreator\qmldesigner\propertyEditorQmlSources\QtQuick" and look at the Specifics for the default QML Components on how to design your Specifics.

    I hope it's understandable and helped you. Feel free to ask if you didn't understand something.

  • Hi!

    Thanks for the hint! Is there an official documentation for that issue? I'm not really able to follow these specific files.

    I'm looking for a way to rearrange/order/group the Properties of my QML Custom Controls in QtQuick Designer. Some of my Controls have more than 20 Properties. And its hard to deal with that much properties.

    a little example/a link to a more detailed documentation would be really nice.

    Thanks in advance!

  • Sorry, there is no official documentation.
    You can have a look at GridViewSpecifics.qml as an example of a big property sheet. You can use Section to group properties.

  • @onek24

    This was a very helpful post. I have been able to make components as you have described here. The only thing I have been unable to work is getting ComboBox to set my component backend value.

    I have a file named RteTextFieldSpecifics.qml where I have (as an example):

                    ComboBox {
                        model: ["one", "two", "three"]
                        backendValue: backendValues.rteSignal
                        Layout.fillWidth: true
                        scope: "RteTextField"
                        manualMapping: false

    When I select e.g. "two", my RteTextField in main.qml will be:

        RteTextField {
            id: rteTextField1
            name: "myname"
            x: 149
            y: 79
            rteSignal: RteTextField.two
            value: 70

    What I want is rteSignal to be populated as a text string:
    rteSignal: "two"

    If I set manualMapping to true, nothing happens to the component.

    Can someone give me a hint to what I should do to make this work as I want to?

  • Can anyone tell what is the purpose of specifics.qml files and what should be the format ?

  • @imyrvold

    Sorry for the late answer.

    The ComboBox component "assumes" by default that you want to set an enum.
    If like in your case you want to do something completely different you have to set manualMapping to true and
    implement the currentTextChanged signal yourself. In the implementation you would do backendValue.value to currentText.
    Keep in mind that you also have to also change the currentIndex if the backendValue changes.
    For this you have to implement onValueFromBackendChanged and set the currentIndex according to backendValue.value.

    You should have a look at: qt-creator/src/plugins/qmldesigner/componentsplugin/Controls/TabPositionComboBox.qml.

  • @RamK

    The specifics files define a custom property sheet. This is currently not documented, but you can have a look at the Qt Creator source code.

Log in to reply