Stacey Levine wrote:

I am now doing this correctly! I have successfully used the relevant sync fusion color picker control in a webblock with correct css and javascript being used and it looks great! I just need to create a set of web blocks for each control and send parameters in for id etc...

Many thanks for pointing me in the right direction!

Andy Tucker.

Andrew Tucker wrote:

Hi Andy, 

Could you please let me know how to achieve this? Any sample or details steps will be helpful. 

Santosh

OK, Found the module I thought I'd lost :-). Assume your using Outsystems 11.

1. Download the SyncFusion controls - The only 2 files you'll need is ej.min.js and relevant css file.
2. Create a Web module called SyncFusion and make it a WebApp.
3. Add a screen to use for testing your controls.
4. Make sure you add HTML web block via WebPatterns dependency.
5. Create a web block called SFInit and add a preparation. You need to add a html block that loads the javascript source ej.min.js and a preparation in the SFInit web block that adds the css.
6. Then you need to create the control. You'll need to look at the documentation for how the control works, but as an example create a web block called SFSwitch. In this control add an input parameter called id (Text), and also an input called IsChecked (Boolean). Add an event OnSetSwitchData.
7. Add an action called SetSwitchData that calls event OnSetSwitchData
8. Also add an edit control (Hidden) which is used to store the data of the control. In the case of a switch this will store True or False.
9. Add a hidden link that calls the SetSwitchData Action (lnkOK). This is used by the below javascript to fire the event when the switch changes from user input.
10. Finally add the HTML for the control as a HTML element, the below example shows the html/javascript added for a switch.
11. On your test screen drag SFInit over and make sure this is at the top of the screen. Then drag SFSwitch over and set the id and initial checked state.
12. To use outside of the SyncFusion module simply add SyncFusion to the dependency of your application and for each screen that uses a syncfusion control just make sure SFInit is always added to the top of the screen.

Hope this helps. If you need any further help let me know. I can provide a .oml if necessary.

<input type='checkbox' id='" + id + "-checkbox' />

<script>

function " + id + "_doChange(checked) {

    document.getElementById('" + edtDataAsText.Id + "').value = checked.toString(); 
    document.getElementById('" + lnkOK.Id + "').click();
}
 
    // Initialize Switch component with checked state.
    var switchObj = new ej.buttons.Switch({ checked: " + ToLower(BooleanToText(IsChecked)) + ", change: function(args) {
        " + id + "_doChange(args.checked);}});
    switchObj.appendTo('#" + id + "-checkbox');
</script>

Santosh Behera wrote:

Andrew Tucker wrote:

<input type='checkbox' id='" + id + "-checkbox' />

<script>

function " + id + "_doChange(checked) {

    document.getElementById('" + edtDataAsText.Id + "').value = checked.toString(); 
    document.getElementById('" + lnkOK.Id + "').click();
}
 
    // Initialize Switch component with checked state.
    var switchObj = new ej.buttons.Switch({ checked: " + ToLower(BooleanToText(IsChecked)) + ", change: function(args) {
        " + id + "_doChange(args.checked);}});
    switchObj.appendTo('#" + id + "-checkbox');
</script>

Hi Andy, 

Thanks for your detailed help. 

Yes I am using Outsystem 11. I will try to follow your above mentioned steps to bring syncfusion color-picker to Outsystems. 

If you have the sample, please share the .oml file, so that it will help me in moving fast in my development. 

Thank you so much once again.

Regards, 

Santosh.

Hi - I have done this with the ColorPicker and it works well :-). I will try and attach the OML early this week. I am very busy at work right now, but I will get this to you.

Andy.

Santosh Behera wrote:

<input type='checkbox' id='" + id + "-checkbox' />

<script>

function " + id + "_doChange(checked) {

    document.getElementById('" + edtDataAsText.Id + "').value = checked.toString(); 
    document.getElementById('" + lnkOK.Id + "').click();
}
 
    // Initialize Switch component with checked state.
    var switchObj = new ej.buttons.Switch({ checked: " + ToLower(BooleanToText(IsChecked)) + ", change: function(args) {
        " + id + "_doChange(args.checked);}});
    switchObj.appendTo('#" + id + "-checkbox');
</script>