SAPUI5 How to implement Threshold-Slider (e.g. in WebDynpro)

Question

Currently, I am facing the problem of implementing a slider in SAPUI5 in the same way as the Threshold-Slider from Webdynpro, which looks like this.

How do you do this? It is very dynamic, the scale (there may be 5 values, there may be 3 values, etc.), the descriptions depend on the scale value ...

Currently, I find Slider in the API, but I doubt it can be implemented with it ... any ideas?

---

06/18/2015: I'm currently working on the sap.ui.commons.Slider extension, what I got right now is far from what I'm trying to achieve:

• When clicking on the slider, change the background color using the visualization tool (each value should have a different color
• A text box on the right side and a link on the left side (more important details, coloring is more important).

What i got ...

sap.ui.commons.Slider.extend("my.Slider", { renderer : { renderInnerAttributes : function(oRm, oControl) { console.log(oRm); // try to find out, what I re-style console.log(oControl); // try to find out, what I re-style oRm.addStyle('background-color', '#ffff00'); // no effect }, } }); var oSlider6 = new my.Slider({ id : 'Slider6', tooltip : 'Slider6', width : '500px', min : 1, max : 4, value : 0, totalUnits : 4, smallStepWidth : 1, stepLabels : true, labels : [ "Bad", "Medium", "Good", "Very Good" ] }); return oSlider6; 

Answer 1

I think the easiest way to achieve this is to either copy the sap.m.Slider file, or modify it, or inherit from sap.m.Slider with the UI5 ​​extension mechanism and override it. Or you can extend sap.m.ProgressIndicator and make it interactive, but that will be a bit more work.

All the basic functions are already present in the slider (scale, number of values, ...), and you can easily change the background color and pen style. A link with a text value can be added using the label control next to it.

Check out this YouTube video on user controls for more details on how to use the UI5 ​​extension mechanism: https://www.youtube.com/watch?v=4KPS2-LHoO0

Hope this helps,

Michael

Answer 2

You can also choose d3js control . In any case, some changes will occur. You can add style as xml. By adding css to your css file, you can make them visually the same as your required controls. By default, the slider has min, max, and step. In the change event, you can add or remove style classes (addStyleClass / removeStyleClass) to show different colors. Text that you can show separately and process using formatting. If you want all this in one control, you should view this page .