How to dynamically change the properties of a qml page embedded in another qml page?

Question

The main qml page is as follows:

Page{

   id: mainPage

   EmbeddedPage{  // this is the embedded page
   }

   DropDown{
       id: dropDown

       Option{
          text: "1"
          value: text
       }
       Option{
          text: "2"
          value: text
       }
       onSelectedOptionChanged: {
           updateEmbPage(); 
       }
   }

   function updateEmbPage(){
       var page = embPage.createObject();
       page.valueNo = dropDown.selectedValue;
   }
   attachedObjects: [
       ComponentDefinition{
          id: embPage
          source: "asset:///EmbeddedPage.qml"   
       } 
   ]
}

The qml for the EmbeddedPage is as follows:

Container{
   property int valueNo

   Label{
      text: valueNo
   } 
}

Now, I want the label text of the EmbeddedPage to change according to the option selected in the dropDown and my method does not work. So, please provide me with a solution. Thanks.

Answer 1

Your problem is probably linked to the type safety system defined in QML (see details here)

You are trying to affect a variant value, i.e selectedValue, see DropDown definition here, to an integer property valueNo. And this where it failed.

I suggest you to change your EmbeddedPage code by:

Container{
   property var valueNo

   Label{
      text: valueNo
   } 
}

Maybe a string type could work (untested, but seem rationnal as the variant could be transformed back in a string property)

Answer 2

Try This

       Page{

   id: mainPage

   EmbeddedPage{  // this is the embedded page
   id:mypage
   }
   DropDown{
       id: dropDown

       Option{
          text: "1"
          value: text
       }
       Option{
          text: "2"
          value: text
       }
       onSelectedOptionChanged: {
           updateEmbPage(); 
       }
   }

   function updateEmbPage(){

       mypage.valueNo = dropDown.selectedValue;
   }
   attachedObjects: [
       ComponentDefinition{
          id: embPage
          source: "asset:///EmbeddedPage.qml"   
       } 
   ]
}

The qml for the EmbeddedPage is as follows:

    Container{
   property int valueNo

   Label{
      text: valueNo
   } 
}