How to call a component from another component (via parameter)

How-to Discussions
1

Introduction: I have a component I’ve been using to display the number of new messages:

<sp.ButtonNav Value=“New Msgs ({CNT})”  />

I’ve written a new component (thanks, Uldis) that displays just the count value in a new fancy way:

<sp.CountIndicator Value="{CNT}" />

Problem: HOW do I call/pass CountIndicator as the parameter to ButtonNav???

<sp.ButtonNav Value=“New Msgs ({call sp.CountIndicator {CNT}})”  />

Is this even possible?

2

Do you mind explaining why do you need to pass it? It’s really hard to understand what you’re trying to achieve here.

3

For the DRY principal (don’t repeat yourself), I’d rather not duplicate code. The CountIndicator is used in other parts of the app. I’d like to also be able to use it after the text “New Msgs” like so it appears like this: “New Msgs (3)”

I could duplicate the UX markup for CountIndicator and make a special version of ButtonNav called “ButtonNavWithCount” that incorporates both the button and the (3) count indication.

However, it’s better if possible to somehow use composition to inject the count indication output, since it’s already a component, inside the ButtonNav.

I need it in this case, but I can see this use case coming up time and again, where you want to be able to pass a component to another component as a parameter.

Does that help?

4

Well you don’t pass it as a parameter, you just use it. Something along these lines:

<Panel ux:Class="sp.ButtonNav">
    <string ux:Property="Label" />
    <string ux:Property="MessageCount" />
    <Text Value="{ReadProperty Label}" />
    <sp.CountIndicator Label="{ReadProperty MessageCount}" Alignment="Right" />
</Panel>

<Panel ux:Class="sp.CountIndicator">
    <string ux:Property="Label" />
    <Text Value="{ReadProperty Label}" />
</Panel>

<!-- using it: -->
<sp.ButtonNav Label="New Msgs" MessageCount="3" />