cancel
Showing results for 
Search instead for 
Did you mean: 

Bind an input field to a slider

Former Member
0 Kudos

Hi,

I have table with in each row an input field and a slider (and much more)...

I want to change the value of the input field by changing the slider (liveChange).

I get the value from the liveChange event but I'm able to get the row.

Here is my code:


<ColumnListItem>

  <cells>

  <ObjectIdentifier title="{Description}" />

  <Input value="{Placeholder}" />

  <Slider

  value="50"

  width="100%"

  liveChange="onChangeSlider"

  change="onChangedSlider" />

  </cells>

  </ColumnListItem>


onChangeSlider: function(evt) {

  var value = evt.getSource().getValue();

  console.log('value has been changed: ' + value);

  var currentRow = $(evt).closest('tr');

  console.log(currentRow.id); // I'm just getting "undefined"

  },

Thanks in advance

Matt

Accepted Solutions (1)

Accepted Solutions (1)

former_member182862
Active Contributor
0 Kudos

Hi Matthieu

If you bind the slider and text to the same value in this manner, then the text will be updated accordingly.

Thanks

-D

Former Member
0 Kudos

Hi Dennis,

thanks for the helpful answer. This is exactly what I need but as I'm using an odata connection to read the data, so the input field is updated only after refreshing the page. It doesn't refresh the input field by liveChange.

Do you have an idea how to handle it?

Matt

former_member182862
Active Contributor
0 Kudos

Sorry, I do not understand your question well. Do you want to move the slider when you change the input value?

Thanks

-D

Former Member
0 Kudos

No, I was wondering why your example doesn't work in my app.

The only difference is that I'm not using a mockup data but a odata connection.

So I assume that the odata need to be refresh everytime the liveChange event appears, right?

Or is there a way to do it an other way?

Thx

Matt

former_member182862
Active Contributor
0 Kudos

Hi Matt

AFIAK, Your table should reflect that changes when your odata has new data.

Thanks

-D

jmoors
Active Contributor
0 Kudos

I think the issue is that the ODataModel by default binding is one-way, where as the JSON model is two way.

https://sapui5.hana.ondemand.com/sdk/#docs/guide/91f0df546f4d1014b6dd926db0e91070.html

If you use the setDefaultBindingMode, does it make any difference?

oModel.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay);

https://sapui5.hana.ondemand.com/sdk/#docs/guide/91f191d26f4d1014b6dd926db0e91070.html

Regards,

Jason

Former Member
0 Kudos

Hi Jason,

Thanks for your help.

I've tried it with the northwind.svc but it doesn't work.

Here is it:

JS Bin - Collaborative JavaScript Debugging

Any idea why?

Best,

Matt

Former Member
0 Kudos

Does anybody have an idea how to handle it?

Thx

Matt

Former Member
0 Kudos

Hi Jason,

I've updated my JSBin (JS Bin - Collaborative JavaScript Debugging).

1. Now it works with twoWayBinding but the input is updated only after the "change" event.

The slider control has 2 different events:

I want to update the value of the input field after the "liveChange" event like it is possible when you are using JSON file (Here an example).

2. It works only if I click on the slider but as sson as I slide, the value is not updated. Any idea why?

3. I'm using the slider in a table and unfortunately, the binding works only for the first aggregation. Why are the others aggregations not working?

Thanks for any help.

Best

Matt

Answers (2)

Answers (2)

Former Member
0 Kudos

Hi Matthieu,

As dennis explained, thats the better approach,

while as in your code regarding utilization of the .closest method,

have a look into the http://api.jquery.com/closest/ documentation,

Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree.

You need to move up with .closest('tr') and then drill down to find the input with .find('columnId') then get the value.


var val = $(this.target).closest('tr').find('columnId').val();

if you want to fetch the name of that paticular row and its corresponding value we have an inbuilt methods in sapui5.


var value1 = oEvent.getSource().getBindingContext().getObject();

console.log(value1.name);

regards,

Nagarjun

former_member189945
Contributor
0 Kudos

Hi Matthieu,

You can get the component by id in the controller with this.getView().byId("componentName"). Also add componentName into the XMLView.

<Input id="inputComponent" />

onChangeSlider: function(evt) { 

     var input = this.getView().byId("inputComponent");

     var value = evt.getSource().getValue();

     input.setValue(value);

},

Note that doing it this way you'd probably have to implement listener for the Input control also, in case it is editable. Another way would be to use MVC and change the Model on Input and Slider change handlers. View (Input + Slider) could then be binded to the model directly.

Regards,

Kimmo