I’m a novice to widgets so please forgive me if this is a very simple task…
I’m attempting to essentially replicate the oh-list-item widget for images except with a custom icon.
Now I’ve made progress by reading documentation. Please see code below:
uid: jb_image_list
tags:
- image
- list
props:
parameters:
- description: Image name
label: Name
name: name
required: false
type: TEXT
parameterGroups:
- name: jbaction
context: action
label: Action
timestamp: Jan 11, 2024, 10:38:17 PM
component: oh-list-item
config:
actionPropsParameterGroup: jbaction
title: =props.name
icon: f7:photo_fill_on_rectangle_fill
iconColor: gray
action: photos
With the above I can essentially provide the Name for the Widget and also select the action. However, based on the above I’d expect the action to default to ‘Open photo browser’ but this does not happen. I’ve even tried to specify the ‘Images to show’ or actionPhotos parameter to be “[object Object]” which i believe should show its own images for the given item the widget is applied to.
Any help would be greatly appreciated and apologies for a noob question.
You’re working harder than you have to here. The whole action parameter group is not required, nor is the actionsPropsParameterGroup setting. All you need is to set the action to photos as you have done and then add an actionPhotos property which takes an array (in yaml that’s a list with - in front of each item) of the information abut each photo you want. The OH version of the actionPhotos property includes a special item option which just allows you to provide the name of an image item and OH will do the rest behind the scenes. So your config would look like this:
There’s one just one issue that you should be aware of. You define the prop title in the widget’s header area but you do no define the prop name. Why does the widget still work? Well, the widgets will accept and use any property that gets passed to them by the configuration that calls them so you can call your widget with the yaml:
component: widget:jb_image_list
config:
title: Some title
name: some_item_name
and it will work just fine.
What’s the point of the props: -> parameters part of the definition then? Those let OH make the property dialog boxes that allow users to configure widgets via the UI instead of yaml, and your widget will not have an input for the name property. It just shows this:
If you wish to be able to configure it with UI dialogs or want to make it available for others, then you should go back and add the full set of used props at the top.
@JustinG you are awesome - very knowledgeable and exactly the kind of help I need! Keep it up, always very nice to see patience and gudiance such as yours.
I think I’ve understood you correctly…see below updated yaml:
uid: jb_image_list
tags:
- image
- list
props:
parameters:
- description: Image title
label: Title
name: title
required: false
type: TEXT
- context: item
description: Image item
label: Image Item
name: image_item
required: false
type: TEXT
timestamp: Jan 12, 2024, 4:44:19 PM
component: oh-list-item
config:
action: photos
actionPhotos:
- item: =props.image_item
icon: f7:photo_fill_on_rectangle_fill
iconColor: gray
title: =props.title
When looking at e.g. the doorbell image from Nest and its in the ‘Overview’ page it displays as expected. Of course, please feel free to comment if this is the correct way or best practices to be following when creating a widget
