This widget will allow users to enter a numerical (plus * and #) PIN code and send a command with the result to a predefined item when pressing the Send button.
How to Use
You can show it inline in a page if you want but the preferred way to integrate it is with a “Open Popup” action in one of the widgets that support them, like the Label Card in a layout page, or a floor plan marker:
In YAML definition this translates to:
component: oh-label-card
config:
label: Unlock
action: popup
actionModal: widget:keypad
actionModalConfig:
mask: "*"
item: TestString
closePopup: true
Resources
uid: keypad
tags: []
props:
parameters:
- context: item
description: Item to send the pincode to
label: Item
name: item
required: false
type: TEXT
- description: Replace pincode characters with this string, leave blank to show it as-is
label: Mask character
name: mask
required: false
type: TEXT
- description: If this widget is shown in a popup, close it after pressing Send
label: Close Popup on Send
name: closePopup
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Oct 20, 2020, 10:17:43 PM
component: f7-block
config:
label: Please Input Pin
style:
--f7-button-text-color: var(--f7-text-color)
--f7-button-bg-color: var(--f7-card-bg-color)
--f7-theme-color-rgb: var(--f7-color-blue-rgb)
class:
- padding
slots:
default:
- component: oh-label-card
config:
outline: true
class:
- margin-bottom
label: "=(props.mask && vars.pincode) ? props.mask.repeat(vars.pincode.length || 0) : vars.pincode"
- component: f7-row
config:
class:
- margin
slots:
default:
- component: oh-repeater
config:
fragment: true
for: digit
in:
- "1"
- "2"
- "3"
- "4"
- "5"
- "6"
- "7"
- "8"
- "9"
- "*"
- "0"
- "#"
slots:
default:
- component: f7-col
config:
width: "33"
class:
- margin-vertical-half
slots:
default:
- component: oh-button
config:
text: =loop.digit
raised: true
large: true
action: variable
actionVariable: pincode
actionVariableValue: "=(vars.pincode) ? vars.pincode + loop.digit : loop.digit"
- component: f7-row
config:
style:
--f7-theme-color: var(--f7-color-blue)
--f7-button-bg-color: transparent
class:
- margin
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
text: Clear
large: true
action: variable
actionVariable: pincode
actionVariableValue: ""
- component: f7-col
slots:
default:
- component: oh-button
config:
class: "=(props.closePopup) ? ['popup-close'] : []"
style:
--f7-button-hover-bg-color: var(--f7-color-blue-tint)
--f7-button-pressed-bg-color: var(--f7-color-blue-tint)
text: Send
fill: true
large: true
action: command
disabled: =!vars.pincode
closePopup: =props.closePopup
actionItem: =(props.item) || 'TestString'
actionCommand: =vars.pincode
clearVariable: pincode
- component: f7-col
slots:
default:
- component: oh-button
config:
text: Back
large: true
action: variable
actionVariable: pincode
actionVariableValue: '=(vars.pincode) ? vars.pincode.substring(0, vars.pincode.length - 1) : ""'