[Silk UI Mobile] Mobile - Getting a Widget Object

[Silk UI Mobile] Mobile - Getting a Widget Object

  
Forge Component
(27)
Published on 14 Jun by Labs
27 votes
Published on 14 Jun by Labs

I'm working with the Mobile implementation of the Range Slider Widget.

Once rendered, is there any way to get the OutSystems Object of that Widget within a Javascript node?

The Object has methods that I'd like to call... but I don't know how to get the Object.

Thanks.

Solution

Hi Davidk,

I managed to interact with the Range Slider in a test app.

I added a Button to the screen where the slider is and in the On Click action of that button I added the following code to a JavaScript node:

var sd = document.getElementById("b3-Slider");
sd.noUiSlider.destroy();

When I click the button the slider is destroyed.

Couldn't find a way to get the id dynamically, hence the b3-Slider hardcoded value.

Can you try to move on with this little push? :)

Solution

Excellent sleuthing... thanks so much João.

I didn't see the b3-Slider id.  Getting b3-Slider, the noUiSlider methods are now available...

It was updateOptions and destroy I was after.  noUiSlider allows some updating of the Slider without having to destroy it... but for adding an Option such as Tooltips, the Slider must be destroyed first and then re-created.

OutSystems didn't implement the option for Tooltips in Mobile... so to add Tooltips to the Slider Widget you'd do this...

var mySlider = document.getElementById($parameters.sliderId);
var sliderObjId = mySlider.childNodes[0].childNodes[0].id;

var sd = document.getElementById(sliderObjId);
sd.noUiSlider.destroy();

noUiSlider.create(sd, {
    start: 20,
    step: 10,
range: {
'min': 0,
'max': 100
},
tooltips: true,
pips: { // Show a scale with the slider
mode: 'steps',
stepped: true,
density: 10
}
});

Getting the Slider Object dynamically isn't a problem.  We know the Id we assigned to our Slider... and the Slider structure seems to be fairly straight forward.  The Slider Object is the grandchild of our Slider element.

The Javascript node has a parameter for our SliderId.  I gave my Slider Widget a name of mySlider and so the Javascript node looks like this...


Cheers!