Suppose you want to have a new edit control, which postpones writting its value to the data engine until an apply button is clicked.

Create the visual item

This new item fits to the controls category of visual items. So we start with CSControl as the root item, and call it ApplyEdit.qml.

import QtQuick 2.0
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.4
import CSDataQuick.Components 1.0

CSControl {
    id: root
    width: 150
    height: 20
}

The TextInput and apply Button could be inside a horizontal RowLayout. The TextInput expands horizontally to take all free space.

RowLayout {
    anchors.fill: parent

    TextInput {
        id: input
        Layout.fillWidth: true
    }
    Button {
        id: apply
        text: 'Apply'
    }
}

And then in the Button clicked signal handler, we set the input value to the data engine.

Button {
    id: apply
    text: 'Apply'
    onClicked: csdata.setValue(input.text)
}

Now in you can simply use it like this elsewhere

ApplyEdit {
    source: 'ao'
}

Add it to the components library

This new item is automatically available if you put it in your current directory. This is very convenient for prototyping and testing. Eventually you might decide it is ready to be shared by creating a components library, e.g. AwesomeItems.

First you create a directory named AwesomeItems, and place the ApplyEdit.qml file inside. Still inside the directory, create a file qmldir with the following content

module AwesomeItems

ApplyEdit  1.0 ApplyEdit.qml

By default the qml serarch path is limited to builtin paths. Extra paths can be incuded by setting QML_IMPORT_PATH environment variable. Suppose the full path is /your/modules/repository/AwesomeItems, then QML_IMPORT_PATH will be the containing path.

export QML_IMPORT_PATH=/your/modules/repository

Now you can access AwesomeItems library as

import AwesomeItems 1.0

ApplyEdit {
    source: 'ao'
}

Make it available in designer

Create a directory designer under AwesomeItems, and within a file awesomeitems.metainfo with the following content:

MetaInfo {
    Type {
        name: "AwesomeItems.ApplyEdit"

        ItemLibraryEntry {
            name: "ApplyEdit"
            category: "AwesomeItems"
            version: "1.0"
            requiredImport: "AwesomeItems"
        }
    }
}

The property editor panel could also be customized, create a file ApplyEditSpecifics.qml.

import QtQuick 2.1
import CSDataQuick.Components.designer 1.0

Column {
    anchors.left: parent.left
    anchors.right: parent.right

    DataSourceSection {}
    ColorSection {}
    DynamicAttributeSection {}
}

Further

The item is only made for demonstrating the process. To use it for real, there are still improvements to done. For example the text input and button background color, the input text color are not connected to the CSControl attributes, and the data value is not updated to text input field.