Problem with ux:Class Visibility

How-to Discussions
1

I wrote the class but he didn’t works

<Panel ux:Class="SmartPanel" ux:Name="SmartPanel">
	<string ux:Property="CheckValue" />
	<JavaScript>
		var SmartPanelVisibility = this.CheckValue.map(function(x) {
			var itemsCount = 0
			var visibility = 'Collapsed'
			for(var k in x) itemsCount++
			if(itemsCount > 0) {
				visibility = 'Visible'
			} else {
				visibility = 'Collapsed'
			}
			console.log(visibility)
			return visibility
		})
		module.exports = {SmartPanelVisibility}
	</JavaScript>
	<WhileActive>
		<Change SmartPanel.Visibility="{SmartPanelVisibility}" />
	</WhileActive>
</Panel>

There is I’m using it

<SmartPanel CheckValue="{object_or_string_or_empty_variable}">
	<!-- UX -->
</SmartPanel>

But acquire the error

Cannot parse '{SmartPanelVisibility}' as 'Fuse.Elements.Visibility': 'Invalid 'Fuse.Elements.Visibility' value: {SmartPanelVisibility}'

How to fix it?

2

Hi keiby, I think the problem there is that you perceive “Visible” and “Collapsed” as strings, while Fuse clearly expects the Visibility= property to receive something of another type, specifically Fuse.Elements.Visibility.

While that might appear confusing at the beginning, it actually starts to make sense when you think about it.

So, how about something like this (did not test if the code actually works):

<Panel ux:Class="SmartPanel" ux:Name="SmartPanel">
    <string ux:Property="CheckValue" />
    <JavaScript>
        var SmartPanelVisibility = this.CheckValue.map(function(x) {
            var itemsCount = 0
            var visibility = 'Collapsed'
            for(var k in x) itemsCount++
            if(itemsCount > 0) {
                return true;
            } else {
                return false;
            }
        })
        module.exports = {SmartPanelVisibility}
    </JavaScript>
    <WhileTrue Value="{SmartPanelVisibility}">
        <Change SmartPanel.Visibility="Visible" />
    </WhileTrue>
    <WhileFalse Value="{SmartPanelVisibility}">
        <Change SmartPanel.Visibility="Collapsed" />
    </WhileFalse>
</Panel>
3

Uldis wrote:

So, how about something like this (did not test if the code actually works):

Thanks for advice. I’ve already try that, but if display many of them like SmartPanel that page lagging hard while scrolling. Any suggestions ?

4

Not an answer to the lagging question but get rid of the if statement and just return itemsCount > 0 it is a boolean afterall

5

The lag is actually no surprise. Imagine the app having to run all of those Changes at once…

I would suggest finding another approach to implement what you want to achieve, but that probably is another thread. Here, we’ve answered the “why doesn’t this work” part, but we are in no position to suggest an alternative approach without a better understanding of what it is you want to do, and why.