First, create a UDT definition and instance. If you'd like to use the same Tags as this example, open the expand panel below, copy the JSON string, and paste it into the Tags folder in your Tag Provider.Click here to expand...
It should look like the image below. Notice, both the instance and definition are placed into their own separate folders.
Create two views. The first will be Big_View that we'll be dragging Tags onto, and the second will be Small-View that we'll associated to the UDT above. For the purposes of this example, we'll use Coordinate Containers as the root container for both views.
In the Small_View, we'll make a minor cosmetic change so it is easier to see when we're embedding it later. We'll change the background color to something other than the default.
The, with the view selected, add a view parameter. When selecting the parameter type, choose Object. We'll name it UDT_Prop.
Add two object members to UDT_Prop. These members will represent the values on the two UDT members in our UDT. The values on our UDT members are integer and string, so both only have a single value. Thus, the object members we need to add here only need to show a single value each. Thus we'll make the object members Value typed.
For the view parameters to know which members in the UDT to associate with, we need to rename them so they match the name of a UDT member. Change the name of the view parameters to Member_1 and Member_2, to match our UDT members.
Now that we have some parameters that will eventually house values from our UDT, we can create components that use these parameters. Add a Label component to Small_View.
On the Label, configure a Property Binding on the Text property, leading to the Member_2. We're using Member_2 here since it's a memory Tag, and we can easily change the value of it later on.
Next, we need to configure the drop configuration settings on Small_View. Select the view, and locate the udts property.
Add an array element to the udts array. For type, click the dropdown and select our UDT definition.
For param, type in the name of the root view parameter we created earlier. If you followed along with the example, the name would be UDT_Prop.
For action, leave that with the default value of bind, which will create some bindings for us when we create an instance of this view.
Now we're ready to test this out. Save your project.
Switch over to Big_View.
Drag the UDT instance (or any UDT instance with a parent type of My_Type) onto Big_View. You'll be presented with a popup, which lists any and all views that are associated with that type.
Select Small_View from the popup, and you'll see an instance of Small_View created. Further more, the values in our UDT instance are made available to the view instance, so the value on the Member_2 Tag will be shown on the label in the instance of Small_View.
Changing the value on the Member_2 Tag will update the label on the instance of Small_View.
Data Type Drop Configurations
Data type drop configurations allow you to associate a view with a certain Tag data type, as well as specify what bindings occur when dropping the view.
Let's use a Tag to create an embedded view with all the property bindings configured by simply dropping the Tag in a view.
- In the Project Browser, select your original view that contains the Tank, LED Display, Slider, and Labels (i.e., Tanks3).
- In the Property Editor, expand the dropConfig property, and then expand the dataTypes property. Configure the following properties:
- Select the data type - Int4
- Set the param - sliderValue
- Identify the action - bind
- Let's create a couple of Tags so we can use the 'dropConfig' feature to create multiple embedded views. Copy the Tag you created in the last example (i.e., Test Tank Tag) to make two more Tags, and change their values. This example uses 52, 33, and 78 for the values.
- Create a new large view so we have plenty of room to drop multiple of these tank views on the screen.
- Drag and drop each of your three Tags into your new large view. You will be prompted for what type of component or view you want to create. Choose your original view (i.e., Plant C / Tank3).
- The three Tank components and their values are now displayed on your view.
- If you check the individual tank views, you will see a binding on the 'sliderValue' param. If you open the binding, you will see that each embedded view is pointing to one of the Tags.