# Need help with the front-end development of a v4 service

**URL:** <https://community.gladysassistant.com/t/need-help-pour-le-dev-front-dun-service-v4/4791>\
**Category:** Développement\
**Created:** [June 29, 2019, 7:08am UTC](https://community.gladysassistant.com/t/need-help-pour-le-dev-front-dun-service-v4/4791 "2019-06-29T07:08:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![NilkOne](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/nilkone/32/3561_2.png) [@NilkOne](https://community.gladysassistant.com/u/NilkOne)\
**Post date:** [June 29, 2019, 7:08am UTC](https://community.gladysassistant.com/t/need-help-pour-le-dev-front-dun-service-v4/4791/1 "2019-06-29T07:08:56Z")

</div>

Hello,

I’m trying to build the front end for the Sonos service, but I’m stuck  
I don’t understand how to execute an action, for example, pressing a button  
I’ve looked at other services and tried several things in vain

Here’s how I’m doing it:

In the .jsx file, I add

```
<button class="btn btn-info btn-sm" onClick={props.getDevices}>
   <Text id="integration.sonos.searchForDevicesButton" /> <i class="fe fe-radio" />
</button>

```

In actions.js:

```
import createActionsIntegration from '../../../../actions/integration';

function createActions(store) {
  const integrationActions = createActionsIntegration(store);
  const actions = {
getDevices(state) {
  console.log('test');
  const devices = [{name : "test1", ip:"192.168.1.42"}];
},
  };

  return Object.assign({}, integrationActions, actions);
}

export default createActions;

```

I press the button, but I never see the logs, and the device doesn’t appear either

How do you do it on your side?

Here are the sources of my repo:

> **[gladys-4-playground/front/src/routes/integration/all/sonos at master ·...](https://github.com/NilkOne/gladys-4-playground/tree/master/front/src/routes/integration/all/sonos)**
>
> Next release of Gladys, Gladys 4. Contribute to NilkOne/gladys-4-playground development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![damalgos](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/d/e274bd/32.png) [@damalgos](https://community.gladysassistant.com/u/damalgos)\
**Post date:** [June 29, 2019, 8:55am UTC](https://community.gladysassistant.com/t/need-help-pour-le-dev-front-dun-service-v4/4791/2 "2019-06-29T08:55:02Z")

</div>

```auto

return <YeelightLightPage {...props} integration={integrationConfig[props.user.language]['yeelight']} />;

Voila, you need to pass the props in your index.js to the sonos.jsx
```

---

<div class="post-metadata">

**Author:** ![damalgos](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/d/e274bd/32.png) [@damalgos](https://community.gladysassistant.com/u/damalgos)\
**Post date:** [June 29, 2019, 9:48am UTC](https://community.gladysassistant.com/t/need-help-pour-le-dev-front-dun-service-v4/4791/3 "2019-06-29T09:48:39Z")

</div>

Same for me! I have an issue with changing the value of a feature name.

```const
          [index]: {
            features: {
              [value.getAttribute('data-key')]: {
                [field]: {
                  $set: value.value
                }
              }
            }
          }

```

Knowing that index is the device number, value.getAttribute(‹&nbsp;data-key&nbsp;›) is the index of the feature I want to modify, and field is the feature name.

Basically, I want to change the value of the correct feature ^^ and it’s not working, does anyone know why?

---

<div class="post-metadata">

**Author:** ![loic\_btz](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/l/3d9bf3/32.png) [@loic\_btz](https://community.gladysassistant.com/u/loic_btz)\
**Post date:** [May 19, 2020, 9:32pm UTC](https://community.gladysassistant.com/t/need-help-pour-le-dev-front-dun-service-v4/4791/4 "2020-05-19T21:32:05Z")

</div>

Hi @NilkOne  
I see that you’ve done a lot of work on the Sonos service integration for V4.  
First of all, a big thank you 👏🏻  
I also have a Sonos Play:1 and I would love to be able to integrate it into gladys V4.  
Can you give me an update on the progress of this service for V4, I’m of course available if you need testers 😉