Widgets CSS

For all widgets, this documentation shows the generated code. Variables like {custom CSS} or {margin top property} are replaced by the value set in the widget properties.

Generic CSS

#pgm-widget-{{number}} is a div containing each widget. The number is randomly generated at runtime,
.pgm-widget the class on the #pgm-widget-{{number}} div, containing every widget;
.pgm-widget-label-top is the class for the label on top of a widget;
.pgm-widget-message is the div containing the message below the widget, used for errors and language messages;
.pgm-widget-message-{success, warning, error} controls the color of the widget's message;
.pgm-widget-help is the div below a widget for the help text.

<div style="margin-top: {margin top property}px">{widget}</div>

<div class="pgm-widget-label-top" style="margin-top: {margin top property}px">
  {label}
</div>
{widget}

<div class="pgm-row" style="margin-top: {margin top property}px">
  <div class="pgm-col-2 pgm-col-padding-right"></div>
  <div class="pgm-col-10">
    <div class="pgm-widget-label-top">{label}</div>
    {widget}
  </div>
</div>

<div class="pgm-row" style="margin-top: {margin top property}px">
  <div class="pgm-col-2 pgm-col-padding-right pgm-widget-label">{label}</div>
  <div class="pgm-col-10">{widget}</div>
</div>

Widgets

Button

<button class="pgm-button pgm-button-{design} pgm-button-{size}" {custom CSS}>
  {value}
</button>

.pgm-button is the design of all the buttons in the Apleno app section;
.pgm-button-sm (small), .pgm-button-md (medium), .pgm-button-lg (large) will change the button size;
.pgm-button-fw will make a block, full width button;
.pgm-button-form will make a block, full width button of the same height as the other inputs;
.pgm-button-primary, .pgm-button-outline-primary, .pgm-button-info, .pgm-button-success, .pgm-button-warning, .pgm-button-danger, .pgm-button-transparent changes the color and look of the button.

Container box / list

<div class="pgm-widget-box pgm-widget-box-{design}" {custom CSS}>
  <div class="pgm-widget-box-header">{header}</div>
  {widgets}
</div>

.pgm-widget-box is the main div of the box;
.pgm-widget-box-header is the header part of the box list, and is omitted if there is no header content;
.pgm-widget-box-{primary, secondary, success, info, warning, danger, light, dark, none} controls the look and colors of the box.

Container columns

<div class="pgm-widget-columns" {custom CSS}>
  <div
    class="pgm-widget-column pgm-widget-column-{width}"
    data-columns="{widget internal id}"
    data-column="{column id}"
  >
    {column widgets}
  </div>
  {other columns}
</div>

Container tabs

<div class="pgm-widget-tabs-container" {custom CSS}>
  <div class="pgm-widget-tabs">
    <div
      class="pgm-widget-tab pgm-widget-tab-selected"
      data-tabs="{widget internal id}"
      data-tab="{tab id}"
    >
      {tab label}
    </div>
    {other tabs headers}
  </div>
  <div class="pgm-widget-tabs-contents">
    <div
      class="pgm-widget-tab-content"
      data-tabs="{widget internal id}"
      data-tab="{tab id}"
    >
      {tab content}
    </div>
    {other tabs contents}
  </div>
</div>

Date

<input type="date" class="pgm-widget-input" value="{value}" {custom CSS} />

Graph

<div
  id="pgm-widget-graph-{widget internal id}"
  class="pgm-widget-graph"
  style="margin: 0 auto; width: {graph width}%; height: {graph height}px"
  {custom
  CSS}
></div>

Iframe

<iframe class="pgm-widget-iframe" src="{value}" {custom CSS}></iframe>

Image

<img class="pgm-widget-image" src="{value}" {custom CSS} />

Label

<div class="pgm-widget-label" {custom CSS}>{value}</div>

Number

<input
  class="pgm-widget-input"
  type="{range, number}"
  min="{min}"
  max="{max}"
  step="{step}"
  value="{value}"
  {custom
  CSS}
/>

On/off

Checkbox

<input type="checkbox" class="pgm-widget-checkbox" {checked} {custom CSS} />

Switch

<label class="pgm-widget-switch" {custom CSS}>
  <input type="checkbox" ${checked} />
  <span class="pgm-widget-switch-slider"></span>
</label>

Path

<div class="pgm-row pgm-widget-path" {custom CSS}>
  <div class="pgm-col-10">
    <input
      type="text"
      class="pgm-widget-input pgm-widget-path-input"
      value="{value}"
    />
  </div>
  <div class="pgm-col-2 pgm-col-padding-left">
    <button
      class="pgm-button pgm-button-form pgm-button-primary pgm-widget-path-button"
    >
      Browse...
    </button>
  </div>
</div>

Progress

Bar

<div class="pgm-widget-progressbar" {custom CSS}>
  <div
    class="pgm-widget-progressbar-inner"
    style="background-color: {color}; width: {percentage}%; color: {calculated text color}"
  >
    {description}
  </div>
</div>

Circle

<svg width="120" height="120" {custom CSS}>
  <text
    x="50%"
    y="51%"
    font-family="Verdana"
    font-size="20"
    fill="#777777"
    dominant-baseline="middle"
    text-anchor="middle"
  >
    {description}
  </text>
  <circle class="pgm-widget-progresscircle" stroke="{color}" [...] />
</svg>

Select

Radio / Checkbox

<div class="pgm-widget-label" {custom CSS}>
  <input
    type="{radio, checkbox}"
    name="pgm-widget-{radio, checkbox}-{widget internal id}"
    value="{value}"
    {checked}
  />
  {text} {other options}
</div>

Select / Multiselect

Please note that the code below is hidden and replaced with a custom widget using Choices JS.

<select class="pgm-widget-input" {custom CSS} {multiple}>
  <option value="{value}" title="{text}" {selected}>{text}</option>
  {other options}
</select>

Text

Text input

<input type="text" class="pgm-widget-input" value="{value}" {custom CSS} />

Textarea

<textarea class="pgm-widget-input" {custom CSS} rows="5">{value}</textarea>

Grid

.excel-colname, .excel-rowname
.excel-colname.excel-headerselected, .excel-rowname.excel-headerselected
.excel-firstcelldiv for the top left cell
.excel-content tr for the rows of the content
.excel-cellselector the selected cell (by default: border: 2px solid #4b89ff;)
.excel-rangeselector the selected range (by default: border: 1px solid rgb(231, 76, 60); background-color: rgba(231, 76, 60, 0.12);)