DEV Community

Uros Mitic
Uros Mitic

Posted on

How to expose a field of a child node to the parent node interface using alias on ROKU

At the beginning, I would like to say that using alias on ROKU is kinda cool thing to do. Unfortunately, the same could not be said for the title of this blog post.

Let's say that you would like to change the field value of your child component outside of his parent node.
You would also like to avoid doing that with callFunc or with using observers due to unnecessary boilerplate code.
When you think about it, you actually don't want/need to do any extra stuff besides just changing the value of the field.
Here is where use of alias can come into play.

Example:

Here is our child component:

<?xml version="1.0" encoding="utf-8"?>
<component name="childComponent" extends="Group">
  <script type="text/brightscript" uri="./childComponent.brs"/>
  <interface>
    <field id="changeMe" type="string" />
  </interface>
</component>`

Enter fullscreen mode Exit fullscreen mode

We have a basic childComponent that has a field defined on interface with the id="changeMe" and since we did not defined the value, default value for this field is an empty string.

Now let's add this child component to it's parent.

<?xml version="1.0" encoding="utf-8"?>
<component name="parentComponent" extends="Group">
  <script type="text/brightscript" uri="./parentComponent.brs"/>
  <children>
    <childComponent id="childId"/>
  </children>
  <interface>
    <field id="changeFieldInChildComponent" alias="childId.changeMe" type="string" />
  </interface>
</component>
Enter fullscreen mode Exit fullscreen mode

Noticed something interesting in the parentComponent?
Take a look at this line:

<?xml version="1.0" encoding="utf-8"?>
<field id="changeFieldInChildComponent" alias="child.changeMe" type="string"/>
Enter fullscreen mode Exit fullscreen mode

Yeah, that little thing is called alias and it will allow us to do exactly what we want!

Let's change the value of the changeMe field of the child component outside of the parent.

So in a component/node outside of parent which has access to our parentComponent, You should be able to to this:

m.parentComponent.changeFieldInChildComponent = "I'm not an empty string anymore"
Enter fullscreen mode Exit fullscreen mode

And that's it! Field changeMe of a childComponent now should have the value of "I'm not an empty string anymore".
This also works with native ROKU component fields.

Top comments (0)