After more reading here in the forum incl. trial and error, I’m able to come up with a solution for my own problem.
The widget can be configured with two items, icons and labels. By using as the component oh-list-item no value/state of a item is shown.
The list for the list items i have placed inside the f7-card-content and the desired one link (action) inside another component (oh-link) under the same slot.
There are also other parameters which can be configured: title, background image and font color.
One thing which is not working for me, and maybe here somebody can help, is that if i put the widget on a page and configure the Action to popup a second widget, i can’t set any component properties of the second widget after clicking “Modal component configuration”. It just shows a empty dialog “Set Component Props” - see the pictures below:
Here is the YAML of the first widget:
uid: twoItemList_OneAction
tags: []
props:
parameters:
- description: Set the title of the widget
label: Set the title of the widget
name: title
required: false
type: TEXT
groupName: general
- description: URL to the background image
label: URL (local or extern) to background image for widget
name: urlBackImage
required: false
type: TEXT
groupName: general
- description: Overwrite the global font-color as rgb (<u>default:</u> <b>0,0,0<b>)
label: Font color (rgb)
name: fontColor
required: false
type: TEXT
groupName: general
- context: item
description: An item to control
label: Item1
name: item1
required: false
type: TEXT
groupName: configItem1
- description: Set Title of the item
label: Title for Item1
name: title1
required: false
type: TEXT
groupName: configItem1
- description: Set Icon shown for the Item
label: Icon name for item1
name: icon1
required: false
type: TEXT
groupName: configItem1
- context: item
description: An item to control
label: Item2
name: item2
required: false
type: TEXT
groupName: configItem2
- description: Set Title of the item
label: Title for Item2
name: title2
required: false
type: TEXT
groupName: configItem2
- description: Set Icon shown for the Item
label: Icon name for item2
name: icon2
required: false
type: TEXT
groupName: configItem2
parameterGroups:
- name: general
label: General settings for the widget
description: Set custom background image, text color etc.
- name: configItem1
label: Settings for Item 1
description: Set item, icon and title of the item
- name: configItem2
label: Settings for Item 2
description: Set item, icon and title of the item
- name: widgetAction
context: action
label: Action
description: Action to perform once the card is clicked
timestamp: Feb 28, 2021, 8:41:32 AM
component: f7-card
config:
class:
- padding
title: =props.title
style:
overflow: hidden
border-radius: 20px
background-image: ="url('"+props.urlBackImage+"')"
background-repeat: no-repeat
background-position: center
background-size: cover
--pool-card-text-color: "=(!props.fontColor) ? '0,0,0' : props.fontColor"
color: rgb(var(--pool-card-text-color))
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-list
config:
mediaList: false
slots:
default:
- component: oh-list-item
config:
item: =props.item1
title: =props.title1
icon: =props.icon1
- component: oh-list-item
config:
item: =props.item2
title: =props.title2
icon: =props.icon2
- component: oh-link
config:
actionPropsParameterGroup: widgetAction
style:
position: absolute
top: 0px
width: 100%
height: 100%
and here for the second widget:
uid: SecondWidget
tags: []
props:
parameters:
- description: A text prop
label: Prop 1
name: prop1
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Feb 28, 2021, 9:06:54 AM
component: f7-card
config:
title: '=(props.item) ? "State of " + props.item : "Set props to test!"'
footer: =props.prop1
content: =items[props.item].displayState || items[props.item].state
Is this not working in general or am i doing something wrong here?
thanks
Henning
