How can I do two actions? I want to set the image and the style on state change

[Neriderc]

When a door is unlocked, I want to update the image to an unlocked padlock and also make this image red. I am not sure how to combine the two together. Either of these rules works on it's own but not both of them:

rules:
                    - entity: lock.front_door
                      element: lock.front_door
                      state_action:
                        action: call-service
                        service: floorplan.image_set
                        service_data: >-
                          /local/floorplan/${functions.isDoorLocked(entity.state) ? "locked" : "unlocked"}.svg
                      tap_action:
                        action: call-service
                        service: >-
                          lock.${functions.isDoorLocked(entity.state) ? "unlock" : "lock"}
                    - entity: lock.front_door
                      element: lock.front_door
                      state_action:
                        action: call-service
                        service: floorplan.style_set
                        service_data:
                          element: lock.front_door
                          style: |
                            >
                            return `fill: ${functions.isDoorLocked(entity.state) ? 'rgb(0,0,0)' : 'rgb(255, 0, 0)'}; cursor: pointer;`;

I have also tried this, based on another discussion I saw, but it doesn't seem to work.

rules:
                    - entity: lock.front_door
                      element: lock.front_door
                      state_action:
                        - service: floorplan.image_set
                          service_data: |
                            >
                            /local/floorplan/${functions.isDoorLocked(entity.state) ? "locked" : "unlocked"}.svg
                        - service: floorplan.style_set
                          service_data:
                            element: lock.front_door
                            style: |
                              >
                              return `fill: ${functions.isDoorLocked(entity.state) ? 'rgb(0,0,0)' : 'rgb(255, 0, 0)'}; cursor: pointer;`;
                      tap_action:
                        action: call-service
                        service: |
                          >
                          lock.${functions.isDoorLocked(entity.state) ? "unlock" : "lock"}

There are no errors, but it only briefly flashes the colour it's supposed to be during the state change, then goes back to having no style set (but the image change stays).

Both of the above formats have the same effect, to change the image but not retain the new fill colour.

Any tips on getting this to work?

[exetico]

I'm on my phone with limited time, so I just looked quickly through it. You should be able to use multiple actions.

Enable debug and check your output. I'm also not sure if defining element within the action, are working in all cases. But, I think so.

With that said, you could also use the new execute function, from within the JS code.

I'll need to revisit the code another day, for a better answer. I'm sorry about the poor quality today 👍.

[Neriderc]

No problem, I wasn't expecting a response this quick anyway!

I have tried the following with the execute service, but I get the same result. Calling just one of them will do that action, but calling both only sets the image and not the style (it does not matter which is called first, it's always the image that succeeds and setting the style fails).

rules:
                    - entity: lock.front_door
                      element: lock.front_door
                      state_action:
                        - service: floorplan.execute
                          element: lock.front_door
                          service_data:
                            style: |
                              >
                                let action_data = {
                                  action: 'call-service',
                                  service: 'floorplan.image_set',
                                  service_data: {
                                    image: '/local/floorplan/locked.svg'
                                  },
                                };
                                action(action_data);
                                
                                action_data = {
                                  action: 'call-service',
                                  service: 'floorplan.style_set',
                                  service_data: {
                                    style: `fill: ${functions.isDoorLocked(entity.state) ? 'rgb(0,0,0)' : 'rgb(255, 0, 0)'}; cursor: pointer;`
                                  },
                                };
                                action(action_data);

[OzGav]

The second example you provided is the correct syntax.

Remove the second element line

If it briefly flashes the correct colour then that suggests to me that the state action is working but some code elsewhere is changing it back.

[Neriderc]

Ah so what I have is a background button that has a fill colour based on whether the door is open or shut (red when open, green when shut), and then what I want is to have a lock symbol depending on if the door is locked or unlocked. But I want the lock symbol to be black if locked and red if unlocked. Here's a quick screen shot, but of course it's not quite right because it's not actually working 🙂

[OzGav]

Well you could use two different elements then. One for the background colour and one for the SVG lock image. Both can listen for state changes of the entitity.

[Neriderc]

That's what I have. The background element is linked with the open/closed sensor, a separate device. The lock itself is linked to the padlock image. The background image is working fine, but my issue is that I want to do two things with the padlock image, the background here is separate and is not linked with what I am trying to do. However, it does mean I can't add a background to solve the issue as you suggested, as I already have a background that is doing something else.

[OzGav]

Why don't you use a black padlock SVG and a different red padlock SVG?

[Neriderc]

Wow, that's a great idea! I don't know why I didn't think of that, stuck trying to resolve what wasn't working instead of thinking of new ideas. I'll give that a go, thanks!

[Neriderc]

It worked! While not exactly what I was aiming to do, I got the result I wanted, so thanks 🙂