Docs on Templates needed

How-to Discussions
1

Please, Please please provide better docs or video tutorials on how to create UI/UX Components with Templates!!!

I tried following the guide in this video, on creating a Combobox component but you never explained how to add the Template logic.

https://www.youtube.com/watch?v=-jk3jNQzE4U

How do I reference the template properties internally, to make change effects etc? Thanks!

2

Hey there, just to be clear, you’re referring to the use of ux:Template and Navigator? If so, we’re in the middle of working on an end-to-end app tutorial that should have you covered there.

Can you explain a bit more about what you’re trying to accomplish by change the properties of an object created by a template?

3

When I pass in a template to be used as a TemplateSource, How do I reference the Template properties externally and internally?

I tried to follow the combobox example: https://www.youtube.com/watch?v=-jk3jNQzE4U

My repo: https://github.com/kristianmandrup/fuse-combobox/blob/master/ComboBox.ux

Perhaps there is a naming error here? Since I have the <Panel ux:Name="item" and the TemplateKey="item" ?

For the default “Template” I can reference the template via item identifier (alias?)

<Each Items="{options}">
  <Panel ux:Name="item" Color="#eee" Clicked="{clicked}">
    <Each Count="1" TemplateSource="this" TemplateKey="item" />
    <Text Margin="20" Value="{title}"/>
    <WhilePressed>
      <Change item.Color="#ddd" Duration="0.05" DurationBack="0.1"/>
    </WhilePressed>
    <WhileTrue Value="{isSelected}">
      <Change item.Color="#ddf"/>
    </WhileTrue>
  </Panel>
</Each>

I can’t use outside the ComboBox component, since it is out of scope! I tried using the ux:Template (name?) Option as an identifier to reference the Color. I’m just guessing here… No idea how the internals work :stuck_out_tongue:

<mr60fps.ComboBox Options="{pets}" Selected="{favPet}">
      <Panel ux:Template="Option" Color="Red" Margin="4">
        <Text Value="{title}" />
        <WhileTrue Value="{isSelected}">
          <Change Option.Color="#ddf"/>

Bottom line: I’m trying to pass in a template for the Option select, with some behavior, ie. and so on which affects change on other elements or itself…

4

Hi,

When you use TemplateSource and TemplateKey to override the template in an Each, you don’t have access to the scope of the Each. This means you can’t access ux:Names from the original site. This is just a logical restriction you’ll have to live with.

The template can however affect it self, where the name of the ux:Template is also the ux:Name, so your last code sinpped there should work.

As always, describing the desired end goal you want to acheive is better than asking very specific questions based on assumptions about how certain features are supposed to work. Start with your end goal and we can help figure out the best way to acheive that goal.

5

Jake,

I think this is on the same line of questions for this thread, so I’m posting here.

In this video: https://www.youtube.com/watch?v=GPOmOIcBMuU

You go over the new router setup, but we don’t actually get to see the code in your DetailsPage.ux file, so we don’t get to see the last step of how to use dynamic variables within the templates.

Can you please post that very simple example code you used in this video for us to see that last step?

Thanks,

Peter

6

Peter: I believe you’re referring to how to receive the data from the route in the page that’s being navigated to, correct? While not the same example used in the video, our cattr sample does this here:

https://github.com/fusetools/fuse-samples/blob/master/Samples/cattr/Pages/Home/HomePage.js#L5

This is also documented in our docs under Nagivation here:

https://www.fusetools.com/docs/navigation/navigation#passing-parameters-to-pages