# Alarm Severity

Severity indicators for alarm lists and equipment summaries.

## Installation

Download: /api/catalog/alarm-severity/download

Ignition Perspective 8.3. In a development project, choose Designer > File > Import and select the ZIP. Preserve the view and style-class paths. Review resource conflicts before replacing anything.

No separate stylesheet snippet is included.

Add an Embedded View (ia.display.view), set props.path to Alarms/AlarmSeverity, and configure props.params using the contract below. Connect your own data in the host view. The package does not include live tags, page configuration or Gateway settings.

## Parameters

Types are inferred from saved defaults; directions come from native propConfig. These are not full schemas or validated ranges.

| Parameter | Type | Direction | Default |

| --- | --- | --- | --- |

| severity | string | input | "critical" |

| label | string | input | "Critical" |

| count | string | input | "" |

| compact | boolean | input | false |

## Embedded View usage

```json

{
  "type": "ia.display.view",
  "props": {
    "path": "Alarms/AlarmSeverity",
    "params": {
      "severity": "critical",
      "label": "Critical",
      "count": "",
      "compact": false
    },
    "useDefaultViewWidth": false,
    "useDefaultViewHeight": false
  }
}

```

## Verification

Source and archive hashes are checked. Designer import acceptance has not been completed for this archive; test in your development project before production.

## Files

### com.inductiveautomation.perspective/views/Alarms/AlarmSeverity/view.json

```json

{
  "custom": {},
  "params": {
    "severity": "critical",
    "label": "Critical",
    "count": "",
    "compact": false
  },
  "propConfig": {
    "params.severity": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.count": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.compact": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "width": 140,
      "height": 28
    }
  },
  "root": {
    "type": "ia.container.flex",
    "version": 0,
    "meta": {
      "name": "AlarmSeverity"
    },
    "props": {
      "direction": "row",
      "alignItems": "center",
      "justify": "space-between",
      "style": {
        "classes": "vc/alarm-severity-root",
        "height": "28px",
        "minHeight": "28px",
        "maxHeight": "28px",
        "gap": "8px",
        "minWidth": "92px",
        "padding": "0 10px",
        "backgroundColor": "#2a1215",
        "color": "#f87171",
        "borderColor": "#8f1d28",
        "borderStyle": "solid",
        "borderWidth": "1px",
        "borderRadius": "999px",
        "boxSizing": "border-box",
        "overflow": "hidden",
        "whiteSpace": "nowrap"
      }
    },
    "position": {
      "grow": 0,
      "shrink": 0,
      "basis": "auto"
    },
    "propConfig": {
      "props.style.height": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "if(coalesce({view.params.compact}, false), \"22px\", \"28px\")"
          }
        }
      },
      "props.style.minHeight": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "if(coalesce({view.params.compact}, false), \"22px\", \"28px\")"
          }
        }
      },
      "props.style.maxHeight": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "if(coalesce({view.params.compact}, false), \"22px\", \"28px\")"
          }
        }
      },
      "props.style.padding": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "if(coalesce({view.params.compact}, false), \"0 8px\", \"0 10px\")"
          }
        }
      },
      "props.style.gap": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "if(coalesce({view.params.compact}, false), \"5px\", \"6px\")"
          }
        }
      },
      "props.style.backgroundColor": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "switch(lower({view.params.severity}), \"critical\", \"high\", \"medium\", \"low\", \"diagnostic\", \"#2a1215\", \"#2a1a10\", \"#2a2110\", \"#122033\", \"#1a1f26\", \"#1a1f26\")"
          }
        }
      },
      "props.style.borderColor": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "switch(lower({view.params.severity}), \"critical\", \"high\", \"medium\", \"low\", \"diagnostic\", \"#8f1d28\", \"#9a4a12\", \"#8a6a1a\", \"#1e5a8a\", \"#3d4a55\", \"#3d4a55\")"
          }
        }
      },
      "props.style.color": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "switch(lower({view.params.severity}), \"critical\", \"high\", \"medium\", \"low\", \"diagnostic\", \"#f87171\", \"#fb923c\", \"#fbbf24\", \"#60a5fa\", \"#94a3b8\", \"#94a3b8\")"
          }
        }
      },
      "position.basis": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "if(coalesce({view.params.compact}, false), \"22px\", \"28px\")"
          }
        }
      }
    },
    "children": [
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "SeverityDot"
        },
        "props": {
          "text": " ",
          "style": {
            "width": "8px",
            "minWidth": "8px",
            "maxWidth": "8px",
            "height": "8px",
            "minHeight": "8px",
            "maxHeight": "8px",
            "borderRadius": "50%",
            "backgroundColor": "#f87171",
            "flexShrink": 0,
            "overflow": "hidden",
            "fontSize": "1px",
            "lineHeight": "1px",
            "padding": "0px",
            "margin": "0px"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "8px"
        },
        "propConfig": {
          "props.style.width": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(coalesce({view.params.compact}, false), \"6px\", \"8px\")"
              }
            }
          },
          "props.style.minWidth": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(coalesce({view.params.compact}, false), \"6px\", \"8px\")"
              }
            }
          },
          "props.style.maxWidth": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(coalesce({view.params.compact}, false), \"6px\", \"8px\")"
              }
            }
          },
          "props.style.height": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(coalesce({view.params.compact}, false), \"6px\", \"8px\")"
              }
            }
          },
          "props.style.minHeight": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(coalesce({view.params.compact}, false), \"6px\", \"8px\")"
              }
            }
          },
          "props.style.maxHeight": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(coalesce({view.params.compact}, false), \"6px\", \"8px\")"
              }
            }
          },
          "props.style.backgroundColor": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "switch(lower({view.params.severity}), \"critical\", \"high\", \"medium\", \"low\", \"diagnostic\", \"#f87171\", \"#fb923c\", \"#fbbf24\", \"#60a5fa\", \"#94a3b8\", \"#94a3b8\")"
              }
            }
          },
          "position.basis": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(coalesce({view.params.compact}, false), \"6px\", \"8px\")"
              }
            }
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "SeverityLabel"
        },
        "props": {
          "text": "Critical",
          "style": {
            "fontSize": "12px",
            "fontWeight": 600,
            "lineHeight": "18px",
            "letterSpacing": "0.02em",
            "whiteSpace": "nowrap",
            "textAlign": "center",
            "overflow": "hidden",
            "textOverflow": "ellipsis",
            "color": "inherit",
            "padding": "0px",
            "margin": "0px"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 1,
          "basis": "auto"
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(len(trim(toString({view.params.label}))) > 0, {view.params.label}, switch(lower({view.params.severity}), \"critical\", \"high\", \"medium\", \"low\", \"diagnostic\", \"Critical\", \"High\", \"Medium\", \"Low\", \"Diagnostic\", \"Diagnostic\"))"
              }
            }
          },
          "props.style.fontSize": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(coalesce({view.params.compact}, false), \"11px\", \"12px\")"
              }
            }
          },
          "props.style.lineHeight": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(coalesce({view.params.compact}, false), \"16px\", \"18px\")"
              }
            }
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "SeverityCount",
          "visible": false
        },
        "props": {
          "text": "",
          "style": {
            "fontSize": "11px",
            "fontWeight": 700,
            "lineHeight": "16px",
            "letterSpacing": "0.01em",
            "whiteSpace": "nowrap",
            "color": "inherit",
            "opacity": "0.92",
            "padding": "0 0 0 2px",
            "margin": "0px",
            "minWidth": "10px",
            "textAlign": "right"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "len(trim(toString({view.params.count}))) > 0"
              }
            }
          },
          "props.text": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "toString({view.params.count})"
              }
            }
          },
          "props.style.fontSize": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if(coalesce({view.params.compact}, false), \"10px\", \"11px\")"
              }
            }
          }
        }
      }
    ]
  }
}


```

### com.inductiveautomation.perspective/views/Alarms/AlarmSeverity/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "view.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/alarm-severity-root/style.json

```json

{
  "base": {
    "style": {
      "backgroundColor": "#2a1215",
      "color": "#f87171",
      "borderColor": "#8f1d28",
      "borderStyle": "solid",
      "borderWidth": "1px",
      "borderRadius": "999px",
      "boxSizing": "border-box",
      "overflow": "hidden",
      "whiteSpace": "nowrap",
      "fontWeight": 600
    }
  }
}


```

### com.inductiveautomation.perspective/style-classes/vc/alarm-severity-root/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```