Based on several posts by @JustinG, I have put together a list of different ways to work with variables or rather constants in widgets:
The use of parameters is an easy way:
uid: ud_constant_widget_props
tags: []
props:
parameters:
- default: ="This is "+"the first line"
name: mytext
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 23, 2024, 5:43:07 PM
component: f7-card
config:
style:
border: 3px solid green
border-radius: 20px
width: 200px
slots:
default:
- component: oh-list
config:
simpleList: false
slots:
default:
- component: oh-list-item
config:
title: =props.mytext
- component: oh-list-item
config:
title: This is the second line
There are some disadvantages:
- the values cannot be calculated (see screenshot)
- at least 4 lines of code
The way @JustinG has described several times uses oh-repeater:
uid: ud_constant_widget_repeater
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Mar 23, 2024, 5:38:55 PM
component: oh-repeater
config:
for: dummy
sourceType: array
in:
- mytext1: ="This is "+"the first line"
mytext2: ="This is "+"the second line"
fragment: true
slots:
default:
- component: f7-card
config:
style:
border: 3px solid green
border-radius: 20px
text-align: center
width: 200px
color: black
slots:
default:
- component: oh-list
config:
simpleList: false
slots:
default:
- component: oh-list-item
config:
title: =loop.dummy.mytext1
- component: oh-list-item
config:
title: =loop.dummy.mytext2
Advantages:
- the values can be calculated
- less code even with multiple data
The post Multiple Widget Actions has inspired me to try a third approach.
However, this approach requires that the constants are used in a popup or a similar construct, as a mouse click is necessary.
uid: ud_constant_widget_oh-link
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Mar 23, 2024, 5:36:12 PM
component: oh-link
config:
action: variable
actionVariable: mytext
actionVariableValue: ="This is "+"the second line"
style:
pointer-events: none
slots:
default:
- component: f7-card
config:
style:
border: 3px solid green
border-radius: 20px
text-align: center
width: 200px
color: black
title: Klick text in box to test
slots:
default:
- component: oh-link
config:
action: popover
popoverOpen: ="#infopopup"
style:
font-size: 22px
pointer-events: auto
text: Klick here
- component: f7-popover
config:
id: infopopup
closeByBackdropClick: true
closeByOutsideClick: true
closeOnEscape: true
style:
color: blue
height: auto
width: 250px
slots:
default:
- component: oh-list
config:
simpleList: false
slots:
default:
- component: oh-list-item
config:
title: This ist the first line
- component: oh-list-item
config:
title: =vars.mytext
The listing is a bit more extensive because I need a popup for this to make sense.
This works, but it is time-consuming to realize several data fields.