Formatting oh-lit-item based on datetime condition

Setup, Configuration and Use Beginners
1

Hi, I have OH5 on RPi and I’m using Satel binding to read statuses from PIR sensors. One thing I do is storing the latest date and time each PIR was triggered. I have added this item into semantic model and I can see the date and time - it’s all great.

Now I would love to do two things:

  • modify the Main UI item entry script (it’s oh-list-item I guess?) so that the font or background color turns to red it the displayed time is within last 5 minutes, blue if last hour and no color if older,
  • second thing is adding another item that would simply display the number of minutes betwen “now” and the date+time stored in the item above.

What script and where to put it to achieve the two goals?

2
  1. Navigate to Settings → Items → your Item
  2. Click “Add metadata”
  3. choose “Default list item widget”
  4. Choose and configure the widget as you wish. Siick to the widgets with “item” in the name (e.g. oh-label-item)

It’s not super easy to set the background color nor the text color (you have to dig into the lower level CSS properties to do that) so often the easiest is to use a badge or color the icon. You can add a badge and badgeColor and if you choose any icon except for the OH icons (e.g. f7, material, iconofy) you can have the icon and the color change.

To choose the color you’ll use an expression.

For details see:

An example custom widget:

uid: rlk_lock_list
tags:
  - list
  - lock
  - marketplace:126596
props:
  parameters:
    - description: Door name
      label: Name
      name: name
      required: false
      type: TEXT
    - context: item
      description: Control Item
      label: Control Item
      name: control_item
      required: false
      type: TEXT
    - context: item
      description: Sensor Item
      label: Sensor Item
      name: sensor_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 3, 2021, 2:35:39 PM
component: oh-list-item
config:
  action: toggle
  actionCommand: true
  actionCommandAlt: false
  actionItem: =props.control_item
  badge: '=(items[props.sensor_item].state == "OPEN") ? "open" : "closed"'
  badgeColor: '=(items[props.sensor_item].state == "OPEN") ? "orange" : "green"'
  icon: '=(items[props.control_item].state == "ON") ? "f7:lock" : "f7:lock_open"'
  iconColor: '=(items[props.control_item].state == "ON") ? "green" : "orange"'
  subtitle: '=(items[props.sensor_item].state == "OPEN") ? "open" :
    (items[props.control_item].state == "ON") ? "closed and locked" : "closed
    and unlocked"'
  title: =props.name

This is an old widget, there are shortcuts now that could make it shorter but this shows the general idea.

dayjs has a function to do something like that.

image
image430×127 4.68 KB

component: oh-label-card
config:
  item: MotionSensor_LastMotion
  label: =dayjs(items.MotionSensor_LastMotion.state).fromNow()
  title: Dad's Last Motion Detection
3

Custom list item widget could look like this:
(Developer tools > Widgets > Create new widget and paste the code from here)

uid: list-colored-time-item
tags: []
props:
  parameters:
    - description: A label
      label: Label
      name: label
      required: false
      type: TEXT
    - context: item
      description: An item to display
      label: Item
      name: item
      required: false
      type: TEXT
      filterCriteria:
        - value: DateTime
          name: type
        - value: "true"
          name: filterToggle
    - default: "false"
      description: Show difference instead of state
      label: Show diff
      name: showDiff
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Feb 11, 2026, 9:03:05 PM
component: oh-label-item
config:
  icon: f7:clock
  title: =props.label
  after: "=props.showDiff?dayjs(items[props.item].state).fromNow(true):
    dayjs(items[props.item].state).format('ddd h:mm:ss')"
  style:
    background: "=dayjs().diff(dayjs(items[props.item].state),'minutes') < 5
      ?'red':dayjs().diff(dayjs(items[props.item].state),'minutes') < 60
      ?'blue': ''"

You can then use the same widget and same Item for displaying “last motion time” or “time since last motion” just by enabling “showDiff” property in widget configuration.

If you want to have colored text instead of background then change style background property to color

1 Like
4

Thank you both! It all worked like a charm, exactly as I wanted. :slight_smile: