OH3 Widgets -- more than one action command?

Setup, Configuration and Use Items & Sitemaps
1

Hello,

i try to give a image / label two different Action commands, one for a item name command and the other for open a widget.

i need the name command to be updated to an item, to make a json call and the popup to open the new widget with the results of the json call.

here is the first action command

actionItem: Item_jsonsearch_name
actionCommand: =items.Item_actor1_name.state
action: command

here i only post the name auf the actor1 in a Item. perhaps there is a postupdate command?

here is the second action command

action: popup
actionModal: widget:kodi_details_info
actionModalConfig:
      item: =(props.prefix1)

can i compine the two actions?

Thank you

2

I don’t think so, at least not directly. Only one action parameter is going to be parsed for any widget. You’ll have to find a way get the results of the json call without using the item command action if you want to be able to use the popup.

Fortunately, in widgets you have access to a JSON object with a parse method that returns an object with your json data accessible. If the only point of the Item_jsonsearch_name item is to use a JSON transformation to extract information from the Item_actor1_name.state then you don’t even need Item_jsonsearch_name at all. Just include another parameter in your config for the modal popup and use this JSON object.

actionModalConfig:
      item: =(props.prefix1)
      jsonresult: =JSON.parse('{"result":true, "count":42}').count

Will set the modal popups jsonresult property to 42.

3

i try to understand what you wrote, but i had problems, english is not my native language.

i need the name of the actor for my json call, on every actor, i had for example on a movie 30 actors. i had 30 names.

until now, i make a rule, thats trigger when the name of the actor changed, and then the rule makes the json call.

here is my json call for example

{“jsonrpc”: “2.0”, “method”: “VideoLibrary.GetMovies”, “params”: { “properties”: [ “title”], “filter”: { “or”: [ { “field”: “actor”, “operator”: “contains”, “value”: [ “ACTOR NAME” ] }] } }, “id”: 1 }

the result looks like this

"movies": [
-0:  {
"label": "Nachts im Museum",
"movieid": 402,
"title": "Nachts im Museum"
},
-1:  {
"label": "Anchorman - Die Legende von Ron Burgundy",
"movieid": 489,
"title": "Anchorman - Die Legende von Ron Burgundy"
},
-2:  {
"label": "Aushilfsgangster",
"movieid": 493,
"title": "Aushilfsgangster"
},
-3:  {
"label": "Das erstaunliche Leben des Walter Mitty",
"movieid": 507,
"title": "Das erstaunliche Leben des Walter Mitty"
},

you see the “ACTOR NAME” changes on every actor i click.

you mean, that i must add the name at the “count” position by items.Item_actor1_name ?

can you post a example how to config your jsonresult : JSON.parse code?

4

i tried it this way

action: popup
actionModal: widget:kodi_actor_movies
actionModalConfig:
jsonresult: =JSON.parse('{\"jsonrpc\":\"2.0\",\"method\":\"VideoLibrary.GetMovies\",\"params\":{\"properties\":[\"title\"],\"filter\":{\"or\":[{\"field\":\"actor\",\"operator\":\"contains\",\"value\":[\"ben stiller\"]}]}},\"id\":1}').result.movies.0.title

but i get

[ { “index”: 235, “description”: “Unexpected 0” } ]

5

The widget’s JSON object will not support the jsonrpc call. It will only parse a full json string. So the result that you get from that call would be parsed and you could then access each of the JSON keys as properties of the object.

For the result you’ve posted (assuming that is the complete json string and that it would be found in the state of Item_jsonresult) that it should be something like this: JSON.parse(items['Item_jsonresult'].state)

And

=JSON.parse(items['Item_jsonresult'].state).movies[-1].label

would return Anchorman - Die Legende von Ron Burgundy

It wasn’t clear from your first post what setting Item_jsonsearch_name accomplished. Because you are relying on the rule that makes the jsonrpc call to be triggered before each time you open the popup then this method won’t work because the JSON.parse method requires the results string.

It now sounds like you really do need to distinct actions in this widget. One action that sets the actor name when you click on it and results in the jasonrpc call and then a second action that opens the popup window.

6

thats mad.

thats no really nice option, to click first on the name and then on the image of the actor for settings first the name and make the call and then open the popup. shit…

i can post the result of the json rpc call in a string over my rule, and then work with the results string when i understand you right?

i have another problem, in my rest client there stands for example

-0:  {
"label": "Nachts im Museum",
"movieid": 402,
"title": "Nachts im Museum"
},

in my string where i write the result the result looks like

{"id":1,"jsonrpc":"2.0","result":{"limits":{"end":10,"start":0,"total":10},"movies":[{"label":"Nachts im Museum","movieid":402,"title":"Nachts im Museum"},{"label":"Anchorman - Die Legende von Ron Burgundy","movieid":489,"title":"Anchorman - Die Legende von Ron Burgundy"},{"label":"Aushilfsgangster","movieid":493,"title":"Aushilfsgangster"},{"label":"Das erstaunliche Leben des Walter Mitty","movieid":507,"title":"Das erstaunliche Leben des Walter Mitty"},{"label":"Der Appartement-Schreck","movieid":516,"title":"Der Appartement-Schreck"},{"label":"Hubie Halloween","movieid":579,"title":"Hubie Halloween"},{"label":"Madagascar 2","movieid":613,"title":"Madagascar 2"},{"label":"Madagascar 3 - Flucht durch Europa","movieid":614,"title":"Madagascar 3 - Flucht durch Europa"},{"label":"Meine Braut, ihr Vater und ich","movieid":621,"title":"Meine Braut, ihr Vater und ich"},{"label":"Nachts im Museum 2","movieid":627,"title":"Nachts im Museum 2"}]}}

there is no [-0] or [-1] as marker.

7

Theres an open issue for this in the webui repo. There was some discussion on the subject and some problems that would come with this solution.

Maybe Yannick or another contributor will find a clean way to implement this at some point.

What could work here as a workaround for now might to include the popup component into the widget code (and don’t open the other widget via popup-action)

So a rough skeleton for this could look like:

uid: command_and_popup
component: f7-card
config:
  title: Execute command and open popup
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: oh-button
            config:
              fill: true
              text: Send command
              action: command
              actionCommand: YourCommand
              actionItem: YourItemName
              popupOpen: .somePopup
    - component: f7-popup
      config:
        class:
          - somePopup
      slots:
        default:
          - component: Label
            config:
              class:
                - padding
              text: '="Your item state: " + items.YourItemName.state'

Hope it helps!

1 Like
8

i will look in this. i run in limitations on the other way.

now i get it to work, but with 2 problems, first i get by the label the symbols [" at the beginning of the label. and "] at the end. can i remove it ?

actor_movie_title0: =JSON.parse(items['actor1_movies_result'].state).result.movies[0]['label']

i get

[ "Nachts im Museum" ]

the second problem is, i get this from the thumbnail

actor_movie_poster0: =JSON.parse(items['actor1_movies_result'].state).result.movies[0].art['poster']

and i get

[ "image://https%3a%2f%2fassets.fanart.tv%2ffanart%2fmovies%2f1593%2fmovieposter%2fnight-at-the-museum-558dbdba436cb.jpg/" ]

first, there is the same problem with the symbols, and the second one is i must manipulate the image url and encode it.

i think this is not possible over the widget?
i run here really in limitations.

9

Can’t test it here, but wouldn’t it be?!
actor_movie_title0: =JSON.parse(items['actor1_movies_result'].state).result.movies[0].label

How the string looks in your JSON file? If it’s saved in the format that you mentioned you could…

  • Remove the first part (Image://) of the path with slice: .slice(8)
  • Exchange %3a with : and %2f with /: .replace("%3a",":")).replaceAll("%2f","/")

So it would look something like this (there are definitely ways to shorten this with RegEx):

=(((JSON.parse(items['actor1_movies_result'].state).result.movies[0].art.poster).slice(8)).replace("%3a",":")).replaceAll("%2f","/")

1 Like
10

use a virtual item vItem

  • to trigger Item_jsonsearch_name via a rule
  • to trigger a popup in this way:
component: f7-card
slots:
  default:
    - component: oh-label-card
      config:
        action: command
        actionCommand: ON
        actionItem: vItem
        label: Test
    - component: f7-popup
      config:
        animate: true
        closeByBackdropClick: false
        tabletFullscreen: true
        opened: '=(items.vItem.state == "ON") ? true : false'
      slots:
        default:
          - component: <whatever-card with your json content>
          - component: oh-button
            config:
              action: command
              actionItem: vItem
              actionCommand: OFF
              style:
                --f7-button-bg-color: transparent
                --f7-button-hover-bg-color: transparent
                --f7-button-pressed-bg-color: transparent
                height: 100%
                width: 100%
                position: absolute
                left: 0px
                top: 0px
                z-index: 999

similar to Rainers suggestion but maybe a virtual item gives you more flexibility

1 Like
11

i added this method, but there is a big problem, it gives no back button on the popup or a close button.

i dont come back.

gives there a solution?

12

Hmm, you could implement the navbar which would give you a similar look to the other popups:

...
- component: f7-popup
  config:
    class:
      - somePopup
  slots:
    default:
      - component: f7-navbar
        slots:
          default:
            - component: f7-nav-right
              slots:
                default:
                  - component: oh-link
                    config:
                      text: Close
                      popupClose: true
...

…or you could add these config parameters, which would allow you to use the escape key or the backdrop click on desktop and the swipe-up gesture on mobile:

...
- component: f7-popup
  config:
    closeByBackdropClick: true
    closeOnEscape: true
    swipeToClose: true
  class:
    - somePopup
  slots:
    default:
...

…or just implement a link somewhere in the popup with the “popupClose: true” config parameter:

...
- component: oh-link
  config:
    text: Close
    popupClose: true
...
1 Like
13

just tap on the screen. the whole popover ist filled with an invisible back button.
if you want popup controls, set

tabletFullscreen: false
14

okay that works great.
is it possible to give the f7-popup a background color?

have you perhaps a wiki page with all the booleans and options of a f7-popup?

15

It is, you can use plain CSS at the f7-popup component

f7 docs → Popup | Framework7 Documentation
Vue specific f7 docs → Popup Vue Component | Framework7 Vue Documentation

1 Like
16

okay, thats too much for me, in my other widgets i had the color

rgba(37, 44, 40, 0.5)

can you perhaps post a example how it must look in the popup code

nevermind, it is

background-color: rgba(37, 44, 40, 0.5)
17

can i delay the popup?

i need 3 seconds, because i make the json call by clicking on the same button where i set the name of the actor?
he dont updates the pictures and items in the poup when they changed when the popup is open.

The normal widget changes the images and items on the fly. But bot the popup.

when i open the popup direct he shows me the movies from the actors i open before.
Then i Must close and open it again to get the right items by the actor i click.

or can i check if i click on the close button of the popup then i set the items to NULL

18

No (afaik).

What did you tried already? You can assign (command) actions to every oh-component (that is capable of doing so), which applies also to oh-link.

19

I try to find a solution for my Problem.but when i Set IT to null ist on close IT dont helps, because the popup items are Not dynamic or dont refresh automaticlly when the items changes.

The Problem is that the popup Not changes the items in it dynamic.
In the normal widget it changes for example the actors when the actor items changes.

But in my popup the items are Not dynamic.
Is this normal?

I search for a way to get the popup items dynamic.
ON every click On a other actor the popup opens and the items are Updated. But they dont then the items Must refresh in the popup.

Or the Problem is, that I need time for example 2 seconds, when i click the actor it takes 2 seconds to make the json call, and Update the items in this time He takes the old data of the items and opens the popup.

20

yes, you can. just add a timer to your rule which triggers a virtual item (see my post above).