Hello,
I have an overview page that I am making and would like each system to show active alarms, if there are any. Currently, I ahve it working, but for aethetics would like the container holding the alarm status table to shrink/grow to the number of active alarms. I have a picture below. The scroll wheel on the left is fine, but I’d like the white section on the right to shrink to the size of the one alarm. Is this possible? I have tried many combinations of flex containers
If the container holding those items is a Flex Container, then try setting basis: auto, grow: 0, shrink: 0. If those alarms are in a Flex Repeater, do the same for it.
Change the position settings of the flex container itself, or the alarm status table? Currently they’re both set to Auto 0 0 like you suggested 
Can you post the view code? Right-click on the view and select “Copy JSON”
I don’t have copy JSON options.
Shift-right-click on the view's node in the designer navigation tree.
Sorry, forgot to mention holding down SHIFT first.
Good to know, thanks. Here is the JSON from the pictures: Also I was wrong earlier, grow is set to 1 for the pictures. If it is set to 0 the entire section disappears.
{
"custom": {},
"params": {
"Alarm_Display_Path": "Bldg 19",
"Building_Status": {
"Number_Of_Systems": 0,
"Systems_Alert_Cnt": 0,
"Systems_Faulted_Cnt": 0,
"Systems_Running_Cnt": 0
},
"Equipment_Image": "/system/images/",
"Equipment_Name": "Equipment Name"
},
"propConfig": {
"params.Alarm_Display_Path": {
"paramDirection": "input",
"persistent": true
},
"params.Building_Status": {
"paramDirection": "input",
"persistent": true
},
"params.Equipment_Image": {
"paramDirection": "input",
"persistent": true
},
"params.Equipment_Name": {
"paramDirection": "input",
"persistent": true
}
},
"props": {
"defaultSize": {
"height": 501,
"width": 534
}
},
"root": {
"children": [
{
"children": [
{
"children": [
{
"meta": {
"name": "Label"
},
"position": {
"height": 1,
"width": 1
},
"propConfig": {
"props.style.classes": {
"binding": {
"config": {
"expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
},
"type": "expr"
}
},
"props.text": {
"binding": {
"config": {
"path": "view.params.Equipment_Name"
},
"type": "property"
}
}
},
"props": {
"alignVertical": "top",
"style": {
"backgroundColor": "",
"borderBottomLeftRadius": 5,
"borderBottomRightRadius": 5,
"borderTopLeftRadius": 5,
"borderTopRightRadius": 5,
"fontSize": 18,
"fontWeight": "bold",
"paddingTop": 8,
"textAlign": "center"
}
},
"type": "ia.display.label"
},
{
"meta": {
"name": "Image"
},
"position": {
"height": 0.765,
"width": 0.9213,
"x": 0.0413,
"y": 0.2
},
"propConfig": {
"props.source": {
"binding": {
"config": {
"path": "view.params.Equipment_Image"
},
"type": "property"
}
}
},
"props": {
"fit": {
"mode": "cover"
}
},
"type": "ia.display.image"
}
],
"meta": {
"name": "Title_Coord_cont"
},
"position": {
"basis": "60%",
"grow": 1
},
"props": {
"mode": "percent"
},
"type": "ia.container.coord"
},
{
"children": [
{
"meta": {
"name": "fault label"
},
"position": {
"height": 0.33,
"width": 0.6,
"y": 0.34
},
"propConfig": {
"props.style.classes": {
"binding": {
"config": {
"expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
},
"type": "expr"
}
}
},
"props": {
"style": {
"backgroundColor": "",
"borderColor": "#FF0000",
"fontSize": 14,
"fontWeight": "bold",
"overflow": "visible",
"overflowX": "visible",
"overflowY": "visible",
"paddingLeft": 10
},
"text": "Systems Faulted:"
},
"type": "ia.display.label"
},
{
"meta": {
"name": "Running label"
},
"position": {
"height": 0.34,
"width": 0.6
},
"propConfig": {
"props.style.classes": {
"binding": {
"config": {
"expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
},
"type": "expr"
}
}
},
"props": {
"style": {
"backgroundColor": "",
"borderColor": "#FF0000",
"fontSize": 14,
"fontWeight": "bold",
"overflow": "visible",
"overflowX": "visible",
"overflowY": "visible",
"paddingLeft": 10
},
"text": "Systems Running:"
},
"type": "ia.display.label"
},
{
"meta": {
"name": "running numbers"
},
"position": {
"height": 0.34,
"width": 0.4,
"x": 0.6
},
"propConfig": {
"props.style.classes": {
"binding": {
"config": {
"expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
},
"type": "expr"
}
},
"props.text": {
"binding": {
"config": {
"expression": "{view.params.Building_Status.Systems_Running_Cnt} + \" / \" + {view.params.Building_Status.Number_Of_Systems}"
},
"type": "expr"
}
}
},
"props": {
"style": {
"backgroundColor": "",
"borderColor": "#FF0000",
"fontSize": 14,
"fontWeight": "bold",
"overflow": "visible",
"overflowX": "visible",
"overflowY": "visible",
"textAlign": "center"
}
},
"type": "ia.display.label"
},
{
"meta": {
"name": "Faulted number"
},
"position": {
"height": 0.33,
"width": 0.4,
"x": 0.6,
"y": 0.34
},
"propConfig": {
"props.style.classes": {
"binding": {
"config": {
"expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
},
"type": "expr"
}
},
"props.text": {
"binding": {
"config": {
"expression": "{view.params.Building_Status.Systems_Faulted_Cnt}"
},
"type": "expr"
}
}
},
"props": {
"style": {
"backgroundColor": "",
"borderColor": "#FF0000",
"fontSize": 14,
"fontWeight": "bold",
"overflow": "visible",
"overflowX": "visible",
"overflowY": "visible",
"textAlign": "center"
}
},
"type": "ia.display.label"
},
{
"meta": {
"name": "Alert Number"
},
"position": {
"height": 0.33,
"width": 0.4,
"x": 0.6,
"y": 0.67
},
"propConfig": {
"props.style.classes": {
"binding": {
"config": {
"expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
},
"type": "expr"
}
},
"props.text": {
"binding": {
"config": {
"expression": "{view.params.Building_Status.Systems_Alert_Cnt}"
},
"type": "expr"
}
}
},
"props": {
"style": {
"backgroundColor": "",
"borderColor": "#FF0000",
"fontSize": 14,
"fontWeight": "bold",
"overflow": "visible",
"overflowX": "visible",
"overflowY": "visible",
"textAlign": "center"
}
},
"type": "ia.display.label"
},
{
"meta": {
"name": "Alerts Label"
},
"position": {
"height": 0.33,
"width": 0.6,
"y": 0.67
},
"propConfig": {
"props.style.classes": {
"binding": {
"config": {
"expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
},
"type": "expr"
}
}
},
"props": {
"style": {
"backgroundColor": "",
"borderColor": "#FF0000",
"fontSize": 14,
"fontWeight": "bold",
"overflow": "visible",
"overflowX": "visible",
"overflowY": "visible",
"paddingLeft": 10
},
"text": "Systems Alerts:"
},
"type": "ia.display.label"
}
],
"meta": {
"name": "Stats_Container"
},
"position": {
"basis": "20%",
"grow": 1
},
"props": {
"mode": "percent"
},
"type": "ia.container.coord"
},
{
"meta": {
"name": "AlarmStatusTable"
},
"position": {
"grow": 1,
"shrink": 0
},
"propConfig": {
"props.filters.active.conditions.displayPath": {
"binding": {
"config": {
"expression": "'*'+{view.params.Alarm_Display_Path}+'*'"
},
"type": "expr"
}
}
},
"props": {
"columns": {
"active": {
"activeTime": {
"enabled": false,
"width": 85
},
"displayPath": {
"width": 160
},
"label": {
"enabled": true,
"width": 125
},
"name": {
"enabled": false
},
"priority": {
"enabled": false
},
"source": {
"enabled": false
},
"state": {
"enabled": false
}
}
},
"enableAcknowledge": false,
"enableDetails": false,
"enableHeader": false,
"enableShelve": false,
"enableUnshelve": false,
"filters": {
"active": {
"conditions": {
"provider": "IGNTN-PE-VP01"
},
"states": {
"clearUnacked": false
}
}
},
"pager": {
"enabled": false,
"initialOption": 50
},
"rowStyles": {
"clearAcked": {
"base": {
"backgroundColor": "#E8E8E8"
}
}
},
"selection": {
"active": {
"mode": "none"
}
},
"style": {
"backgroundColor": "#572020"
},
"toolbar": {
"enableConfiguration": false,
"enablePreFilters": false,
"enableShelvedTab": false,
"enabled": false
}
},
"type": "ia.display.alarmstatustable"
}
],
"meta": {
"name": "FlexContainer"
},
"position": {
"align": "auto",
"basis": "100%",
"grow": 1
},
"props": {
"direction": "column",
"style": {
"backgroundColor": "#E8E8E8"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "root"
},
"props": {
"alignContent": "space-between",
"direction": "column"
},
"type": "ia.container.flex"
}
}
Not sure how you pasted that, but usually there’s a copy icon when someone posts code, and I don’t see that. Then when I select it all and copy/paste it into Designer, it says “Data in clipboard is not a valid view config.”
Interesting, try again I edited it
You need to post it as Pre-Formatted text.
Please see Wiki - how to post code on this forum.
As @lrose said:
done, i had it that way at first but also included blockquote accidentally
You still didn't quite have it right, but I've fixed it.
You just want three backticks around the raw string:
```
some preformatted text
```
AlarmStatusTable is set to grow: 1 and shrink: 0. Reverse that.
Done, container shrinks down to a thin line
You may want shrink: 0 if it’s actually hiding content.
I think I was confusing, I mean even with content in the box it shrinks to a thin line and hides content.
Even if you set shrink: 0?
Yes thats if i set shrink to 0 its a thin line no matter what.