Important: Please read the Qt Code of Conduct -

Javascript and UI Form

  • Hello everyone.
    When I write code in a *.qml file I have the opportunity to write JS code in a Component.onCompleted signal handler. When I use *.ui.qml file, it is not possible to write JS code there. I must use the implementation file. Till here, all is fine.
    The problem is : there is no way to delare this signal since we must to select one from the predefined list. I checked all signals and didn't found.
    I have a property alias declared in the *.ui.qml file for the target id. Can someone help me ?

    Sample code in FileNameForm.ui.qml (FileName.qml is its implementation)
    Item {
    property alias comboCountry: comboCountry
    GridLayout {
    columns: 2
    rowSpacing: 8
    Label { text: qsTr("Pays") }
    ComboBox {
    id: comboCountry
    textRole: "country"
    model: Country { }
    // in a *.qml file it's possible to write code here
    //Component.onCompleted: {}
    // How to do the same when using *.ui.qml and an its implementation ?

  • from the example project at
    might help get your head sorted.

    You can still do onCompleted work - just not declared inside the UI file. Do that where you use the file not inside it.

    You also can declare your own qml signals (but I don't think that's what you want). The reason you can't is because if you are using an UI file - that's the whole idea. No scripting or functions. Bindings are fine.

    So see in that example file? Settings has an SettingsForm instance and used onCompleted to invoke readData method.

  • Hi,
    Thanks for your reply. I read the SettingsForm example but I didn't found what I'm looking for.
    The Component.onCompleted is referencing the whole object (SettingsForm) but I want to reference individual objects declared inside the form. Each one can do its completion irrespective of other.

  • @Diarby hi,
    you can create your own qml Type and add it to .ui.qml. With this you can reference childs by their x,y position..


    import QtQuick 2.0
    Item {
        Component.onCompleted: console.log(parent.childAt(0,0).color="red");

    Hope it can help you

  • @Diarby Hmmm. I'm away from my machine currently... can you alias the object you want in the ui file
    and then attach to it's completed?

    If I can remember, I'll try and have a look myself Monday (it's Sat. here).

  • @6thC Hi. I exported the object from ui.qml file with an alias property. The problem is I can write only suggested handlers.
    The concept of separation between ui and code logics is the best and I agree to it. However, in the onCompleted handler we have to write codes so it will be right to have this handler in the suggested handlers. I think its absence is a weakness.

  • @LeLev Hi. Thanks for your suggestion but I think this way is a reinvention of the wheel. If the ui.qml contains more objects with different code logics, we have to implement a file for each one increasing the risk of do more mistakes.
    The Qt provides many QML types ready for use with an opportunity to implement user logic in the onCompleted handler.

  • @Diarby
    I see what you mean.

    I cannot access an aliased objects onCompleted from the qml file. That was unexpected (to me).

    All the other handlers are available in the autocomplete ... even onDestroyed.
    However, If I actually use onDestroyed, at runtime I get:

    qrc:/main.qml:12 Type CustomComponent unavailable
    qrc:/CustomComponent.qml:13 Cannot assign to non-existent property "onDestroyed"

    the aliased object fills the parent and I can access onWidthChanged as expected...

    I think it'd be useful to have exposed too and indeed I expected it already was.

  • Hello everyone,
    I let this opened until a solution is found. Maybe someone else can fix this.

  • Maybe someone on could help?
    Or you could report a bug - it may not be. It maybe that there is a way to do this.

    If I was you and needing this now as you are - I would probably try moving those objects in the UI file into separate QML + UI files and doing the onComplete stuff there? Either way the forum probably won't help get anything progressed, it's great for helping to use it but it's not really the best place for getting effective changes.

  • Thanks for links supplied. I would submit later, after my learning of QML.
    For now, I did separations to accomplish this work, which is a test of QML Programming as I'm new to Qt.

Log in to reply