How to make a component NOT visible at dashboard startup?

#1

I want to make a component unvisibile until the user clicks on some other component. I used the field "visible":false in the configuration of my UIViewUsageAndEvents component but it doesn’t work. Indeed, when I get component I see the visible property is set to true:

var element = env.findComponent("ApplicationId.PageId.ComponentId");
element.visible

=> true

Is there a better way to set this property after rendering?? Maybe at the end of some initialize() function?

0 Likes

#2

you can give a try doing

element.set("visible",false);

as for documentation looks like this has effected only once component is rendered.
Also take a look at this property -

autoHideComponents: boolean
0 Likes

#3

Unfortunately, neither setting visible or autoHideComponents to false make the chart unvisible. On the contrary, the following works:

var element = env.findComponent("ApplicationId.PageId.ComponentId");
element.hide();

Is there a function I can remix to add this command?

0 Likes

#4

try to set this property in the component like below - this property is used in the render() function

autoShow = false

Then of course to make it show up you need to call from somewhere else the show() function on the component instance

0 Likes

#5

I am trying the following, but it is still not working…

 component UsageChart {
        "id": "MyPackagerUi.UsageChart",
        "component": "UIViewOnlineUsageAndEventsBoiler",
        "enablePriorPeriod": false,
        "enableExportChart": false,
        "enableStatistics": false,
        "ignoreTimeZone": true,
        "dynamicTitle": "Risk Index for Sibilo {{ record.data.id }}",
        "medianText": "{~IMyPackagerUi.UsageChart.medianText~}",
        "showPriorText": "{~MyPackagerUi.UsageChart.showPriorText~}",
        "consumptionText": "{~MyPackagerUi.chart.consumption.axis~}",
        "statisticsDataPointsText": "{~MyPackagerUi.UsageChart.statisticsDataPointsText~}",
        "statisticsHolidayText": "{~MyPackagerUi.UsageChart.statisticsHolidayText~}",
        "statisticsFooterText": "{~MyPackagerUi.UsageChart.statisticsFooterText~}",
        "intervalText" : "{~.UsageChart.intervalText~}",
        "dateRangeSelectorEnabled": false,
        "dynamicDateRange":true,
        "autoShow": false,

If I get the component from Console, I can see that autoShow is actually valued to false, but component is still visible.

0 Likes

#6

Show/hide based on the autoShow config is implemented in UIViewComponent.render. Does your component override the render method, and is it calling UIViewComponent.render?

0 Likes

#7

Actually, my component is not overriding the render method. I assumed the autoShow property to be evaluated on the basis of the value set in the UIViewUsageAndEvent component:

0 Likes

#8

You could try to set a breakpoint inside UIViewOnlineUsageAndEventsBoiler.show to see who is calling it and work backwards from there. Also check to see if, after rendering, the visible field is set to true or false (that gets set by show and hide)

0 Likes