Unfortunately, the widget builder does not have a form to easily create a widget. So I recommend opening another tab and creating the widget the way described in the previous page of this tutorial. Make sure to select the card type instead of accepting the default and to select the Item so that all the fields are present in the code tab.
Hi Rich Im having a go at this and hitting some beginners problems - I don’t understand this part above - what is the previous page.
I tried just adding a new widget by clicking on the + sign in the widget builder and copying in the code from your example. I added the widget as the default widget to a light item then try to add this to a page it does not work. I select the item but it does not keep the selection. Do I need to add this to a page in a specific way - through a list item etc…It seems to be working in the prebuilt Home pages but I was assuming these widgets can be used in the page builder ui?
Hey rlkoshak, I never worked on a wiki entry, but I read your initial statement as an invitation to just try to improve.
So I had initial struggles understanding the props purpose and have rewritten this believing my version is easier to understand.
Here is old followed by new:
I am currently trying to create a widget and are struggling a little bit.
I want to create one “element” for a tv channel with the current show and the upcoming show. When I click anywhere in the “element” then an Item should receive the value of the channel.
I am not able to create the element to be like “one”. Instead I needed 4 oh-label-cards within a row. But then There is a lot of space where nothing will happen when I click on it.
Is it possible to create a widget where I can click anywhere in the element and then a command will be sent?
I am not an expert in this stuff but I imagine if you put them all into an oh-card then you should be able to apply an action to the whole card instead of just one element. But beyond the basics I’m not an expert.
Frankly, if it’s not already posted above or in one of my tutorials or it’s not in the docs I don’t know it. Seriously, all I’ve done are the merest basics with custom widgets. I’ve done nothing fancy and what little bit I’ve done outside of the very simple took help from others.
I believe if you put all your content in the default slot of an oh-link and set the link action to send the command of interest then the action behavior of the link will trigger no matter where in the content you click (note: if you have an item with its own action in the link content, clicking on that will trigger BOTH actions)
Clicking on any part of that (either button or the airplane) with trigger the series of options buttons from Item_With_Command_Options, however, if that click is on the Button 1 part of the area then the options will AND the switch will get toggled.
Your indentation is wrong. Your oh-link and the following f7-row are on the same level which means that the f7-row and its children are not within the oh-link. In the example, all the items that should be contained within the link are indented more than the link component itself.
can i somehow show different icons on a widget depending on the state of an item?
For example i changed from a simple day/night mode to the timeOfDay design pattern of @rlkoshak .
Actual my nightmode at the widget just gets on and off. Now i would like to show a different icon depending on the timeOfDay state (MORNING, DAY, EVENING, BED, NIGHT).
You can do this in the Same way with the f7 icon like you did with the color, instead of state ON you replace with the time of day state and instead of the color use the f7 icon name. You can have more than 2 options lined up of course.
Are there any plans to enable live-rendering of list-type YAML widgets in the dev tool? As someone who’s programming technique basically devolves to “throw it at the wall and see what sticks”, the inability of the dev tool to visualize list-item widgets is making developing new ones (not just copy-pasting code) very difficult for me.