Font Size of KPI Name Column

Apps (Frontend) Apps Builder
1

Dear All Builders,

is it possible to change the size of the KPI-Name config element in a KPI Element? I use multiple KPIs and the name is quite small…

image
image837×120 6.04 KB

Code:

{
  "id": "kpi_purchase_requisitions",
  "type": "kpi",
  "source": "unresolved_po_requisitions",
  "sourceOptions": {
    "sql": "SELECT COUNT(*) as kpi_value, 'Unresolved Purchase Requisitions (Authorized Today)' as kpi_name, ' ' as unit, 1 as index from inputTable i where rnl_cfo_budget_approved_at_ts = today UNION SELECT CASE WHEN d.val1 / d.val2 IS NULL THEN 0 ELSE d.val1 / d.val2 END as kpi_value, 'Share of All Authorized Requisitions (Today)' as kpi_name, '%' as unit, 2 as index FROM ( SELECT COUNT(*) as val1, MAX(total_open_po_requisitions) as val2 from inputTable i where rnl_cfo_budget_approved_at_ts = today ) as d order by index "
  },
  "config": {
    "color": "#becd32",
    "kpiName": {
      "column": "kpi_name"
    },
    "value": {
      "column": "kpi_value"
    },
    "unit": {
      "column": "unit"
    },
    "layout": {
      "orientation": "vertical"
    }
  }
}

Thanks in advance :slight_smile:

2

Maybe you can try out large/small with its boolean values if this improves something at your situation, if you have not done already

"layout": {
      "orientation": "horizontal",
      "large": false || small: "true"
    },
3

Thanks :slight_smile: Yes, I tried it but it only affects the KPI value column not the name. So here it does not help unfortunately

4

The solution we found is based on the Flex Grid Training App on Internal. It uses an html element instead of the kpi element and presents it in a nice looking box.

{
  "id": "kpi_ele",
  "type": "html",
  "source": "my_datasource",
  "styles": {},
  "sourceOptions": {
    "sql": "SELECT COUNT(*) AS count1 FROM inputTable i FROM inputTable"
  },
  "config": {
    "values": [
      {
        "origin": "data",
        "column": "count1",
        "row": 0,
        "name": "first_min_value"
      }
    ],
    "html": "<div style='display: flex; height: 100%; padding: 40px 20px; align-items:center; border:2px solid rgba(51, 146, 197, 0.3); background:rgba(212, 234, 246, 0.5) '><div style='display: block; margin: 0 20px 0 0;'><h3 style=''>{{first_min_value}}</h3></div><div style='display: block; text-align: left;'><p>this is my KPI</p></div></div>"
  },
  "syncSets": [
    
  ]
}