Which ways are there to create compact UIs? Vertically, the list-widget seems to be useful. But I’d like to have more control horizontally, too; as to get something like a table.
Here’s one problem I have at the moment:
On the left, I’d like a label like room-name, and next to it have sliders etc. But since they have different heights, it doesn’t work.
Another table I’d like to have would be a callers list (Name/Number, Time of calling) from the Fritzbox-binding. I just mention it, because someone might have created this already …
All this will require making yourself a custom widget or two, but the short answer is that to get a table effect you’ll need to combine rows and columns (oh-grid-row and oh-grid-col, or f7-row and f7-col). Combine in this case means create a row component and then add columns to that row’s default content slot and populate the columns with your desired components.
But in this case there might be an even better option. The toggle list items have a after slot and you can just add an ‘oh-slider’ directly to each of those to keep them on the same section of the list.
Alternatively, you can check out rlkoshak’s awsome examples and tutorial on how to make custom list widgets that will contain all this info in whatever custom way you wish.
First I tried the “after” setting, but I didn’t get it to work. I could insert plain text, but not an additional field which I tried in the code. I copied Either I put it in the wrong spot:
And when it comes to creating an own widget, I am somewhat lost. I looked in the framework7 description of “grid” which more or less seems to be what I’d like to get. From the given example, I tried to copy a small part into the widget-creation like this:
Which doesn’t work. No surprise, since I don’t really know what I’m doing there …
Maybe this requires much more knowledge than I currently have and I’ll just have to live with the way my pages look (it’s not that bad). But maybe it’s just a little thing that needs to be changed. If so, what?
The funny thing about YAML is that it’s primary formatting is based on indentation and lining up of each of the lines of code. So it looks like some of your errors are just coming from lines that are not indented enough or too much. But in this particular case I think the problem is that there are two ways to access the various “slots” where you can insert things. As you discovered, if you are inserting plain text, you can just use the slot name as a map key for the object:
- component: oh-list-item
config:
title: List Item
after: After text goes here
However, that shortcut method will not work when you are attempting to insert another widget. In order to do that you have to use the longer form which is the same as what you’ve used (copied) in all the steps above the list item in your example. That is, you have to explicitly access the list of the widget’s slots and then define which slot you are going to be putting a widget into:
- component: oh-list-item
config:
title: List Item
slots:
after:
- component: oh-label-card
config:
title: This is a widget in the after slot
To explain what you are seeing above: most widgets have multiple slots and define the most commonly used slot as the default so 99% of the time when placing a widget inside of another widget you can just use
slots:
default:
But in this case the default slot for the oh-list-item widget is not the one you want so you have to specify the after slot instead.
This didn’t work because the example code given in on the f7 website is the html that actually constructs the widgets. You can’t mix that into the YAML. Under the hood, OH uses the YAML to construct that html by essentially using a blank html template for each widget and then filling in the important parameters based on the YAML configuration you supply. But using the f7 rows and cols would look very much like the oh rows and cols from your first example.
@JustinG :
To begin with, I’d like to thank you for your patient and detailed explanations
When I entered your widget-code and used the widget, it works. Now all I have to do is change the widget as to get the rows, columns and library-cards that I need. But with this basic structure, I should be able to get this done. And then there’s also the alternative with the after-part:
Although I still lack a lot of basic knowledge, I basically understood what you wrote.
I thought I did it correctly this time, but I get an undefined message:
Should be just a minor change. You’re missing the slots keyword above the after. You can only add widgets to these predefined slots so in order to nest a widget inside another you cannot use the keyword under the config heading you have to use the slots heading instead.
- component: oh-label-item
config:
title: Label List Item
slots:
after:
- component: oh-label-card
config:
title: Widget in the after slot
Using this method you could add several different widgets to another widget in different places by using different slots. For example:
Got it, thanks again!
Quite interesting; I wish I had more time to deep-dive into OH, I just started and am only scratching the surface. With OH’s (in my perception) steep learning-curve it’s great that the community is so supportive!
Things basically work fine, even having more than two objects within a line. But now I have another question:
The slider’s length (within the colorpicker-item) depends on the length of the titel. Actually I don’t want a title at all. How can I define its length directly? There should be a property like “length” but I couldn’t find any such thing.
Hey there, Holger!
Like you, I am standing quite at the beginning of the “steep learning curve”! So…this is exactly the discussion and “lessons”, I was searching for, to get a compact widget at the end - thank you for starting this thread, and thank you for sharing your knowledge!
What would help my understanding would be to see the full code - as it is now. Is there a chance, that you could share it with me resp us all?
Thank you again!
first time in OH that I can help someone for a change Although the credit is due to Justin, who’s so kind to answer my questions so patiently.
Here’s the YAML of this line: it’s a colorpicker and contains two (verschachtelte, don’t know the English term) items. I guess like this you can put as manys itemes behind each other as you like / as there is space.
component: oh-colorpicker-item
config:
title: Zimmer Holger
item: LeuchteHuegross_Farbe
slots:
after:
- component: oh-slider-item
config:
item: LeuchteHuegross
title: Längerer Titel für Slider
slots:
after:
- component: oh-list-item
config:
title: Just a List Item for Testing
The style keyword will allow you to apply css styling to the widgets. In this case it sounds like you just want to adjust the width of the slider which is simply the width property.
component: oh-colorpicker-item
config:
title: Zimmer Holger
item: LeuchteHuegross_Farbe
slots:
after:
- component: oh-slider-item
config:
item: LeuchteHuegross
title: Längerer Titel für Slider
style:
width: 200px
slots:
after:
- component: oh-list-item
config:
title: Just a List Item for Testing
You can use several different units in the width property.
There are lots of sites that have good introductions to css and the many things you can do. This one is one of the more useful in my opinion: CSS Tutorial
So…this is exactly the discussion and “lessons”, I was searching for, to get a compact widget at the end - thank you for starting this thread, and thank you for sharing your knowledge!
Although the credit is due to Justin, who’s so kind to answer my questions so patiently.