Service in custom component does not display controls in UI Mode defined in services.yaml

Development
1

I’m creating a custom component which has a service. This is defined in services.yaml and working fine in yaml mode. However, when I switch to UI Mode in the services tab under developer tools, there are no UI controls.
I’ve also replaced my inputs with some other content from various components out there to see if my code is wrong. It’s my first attempt at doing a custom component, so I bet I’m blatantly overlooking some basic requirement, but I can’t seem to find anywhere what is missing or some code samples anywhere…

# Sample services.yaml content with just one field as an example
my_service:
    name: custom service
    description: Do something
    fields:
      volume:
        required: true
        example: 50
        default: 50
        selector:
          number:
            min: 0
            max: 100
            step: 1
            unit_of_measurement: "%"
            mode: slider

I’ve kept this sample generic. I can add more controls if someone can point me in the right direction as to why the volume field does not display in UI mode for this sample. Thanks!

2

Somewhere in your code, you should register this service.

Example code

3

Thanks! To clarify, I’ve got the service registered, the service handler working (for yaml input from the front end service call) and the python script is handling that data ok.

I was under the impression that as long as you define the UI components in services.yaml, you can simply use those input values from the front-end in the service handler (again since it works when setting those in yaml in the service call…). So not quite if I interpret your response right and looking at that repository, some more learning to do here :slightly_smiling_face:

4

Looking at one of my own component, the difference I see is that you don’t define name and description

search:
  # Description of the service
  name: Browse to an item
  description: "Search for items on a Jellyfin device"
  fields:
    entity_id:
      name: Entity
      description: Jellyfin sensor entity.
      required: true
      example: "sensor.jellyfin_cloud"
      selector:
        entity:
          integration: jellyfin
          domain: sensor
    id:
      name: Search term
      description: Search terms to look for.
      required: true
      example: "bourne"
      selector:
        text:
5

That’s it. I’ve got it working now. Can’t believe it was that simple, I was thinking it was about to get way more complex. Thank you.