Errors trying to import SyncFusion Community into Integration Studio

Hi - I would really like to use the controls in the SyncFusion community edition in Outsystems. I think there are two ways I could do this. 

1. Import the javascript files as resources in a new extension

2. Import .NET assemblies from sync fusion into Integration Studio.

I would prefer to do 2 as this gives me better access to the functions available. However I am having a lot of problems. I am trying to create separate extensions for the various controls e.g. 1 for the scheduler, but when I try compiling in integration studio I get a syncfusion namespace error. I also tried to import syncfusion.ej.dll (which I think might contain the namespace) but I get another error complaining about newtonsoft.json - See attached file. I cannot seem to get version 6.0.0.0 of newtonsoft anywhere, and if I try and click "Load" (See attached image), integration studio freezes and I have to kill it.

Any help with this will be incredibly well received.

Andy.

Solution

Are you trying to use integration studio to create an extension for UI controls? If so, that will not work as extensions are server side code and not meant for UI controls.

Solution

Hi Andrew,


(Note: read Stacey reply above)


Regarding the error itself (and not the actual use case) can you tell me what version of Integration Studio you are using and where can I download the dll's that you are trying to import?

It's not the first report that I've seen of missing libraries on import, but was never able to replicate the problem.


Regards,
João Rosado

Hi Joao,

I'm using Integration Studio 10.0.823.0 and I am downloading the DLL's from the community edition of Syncfusion at https://www.syncfusion.com/ you have to sign up for a community license if you wish to download the controls. I am using the controls from the ASP.NET collection and ASP.NET Core collection. I've read Stacey's comment, and I think I may be going the wrong way about it.

I have also downloaded the Javascript collection for Syncfusion. What I'm ideally trying to do is be able to drop say a Schedule control onto an Outsystems Webscreen and then be able to call functions that allow manipulation of said control. I think I understand that I may need to create a html block in a web screen such as <div id="myschedule" class="appointmentarea"></div> and then use the actions/javascript/jQuery to manipulate the schedule control. 

To be honest I'm not 100% sure on how I should do this and just need some guidance on what is possible. I really like the look and feel of the controls and would love to try using them in my Outsystems project.

Many thanks, 

Andy Tucker.

Stacey Levine wrote:

Are you trying to use integration studio to create an extension for UI controls? If so, that will not work as extensions are server side code and not meant for UI controls.

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:

Stacey Levine wrote:

Are you trying to use integration studio to create an extension for UI controls? If so, that will not work as extensions are server side code and not meant for UI controls.

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.




Hi Andy, 


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


Santosh

Hi Santosh,

I can't remember exactly what I did, but basically I downloaded the community edition of SyncFusion selecting the components I needed (There is a download area where you can select just the components you need) and ended up with 2 key files. A javascript and css files for the relevant themes. I then created an Outsystems client module, and imported the JavaScript / css files as resources. The challenging part was making sure the right javascript/css files were used. I'm going to try and do this again anyway as when I first tried this I was using Outsystems 10. I am now using Outsystems 11. I'll keep you posted and provide some basic instructions as soon as poss.







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:

Stacey Levine wrote:

Are you trying to use integration studio to create an extension for UI controls? If so, that will not work as extensions are server side code and not meant for UI controls.

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.




Hi Andy, 


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


Santosh



Andrew Tucker wrote:

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:

Stacey Levine wrote:

Are you trying to use integration studio to create an extension for UI controls? If so, that will not work as extensions are server side code and not meant for UI controls.

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.




Hi Andy, 


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


Santosh



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:

Andrew Tucker wrote:

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:

Stacey Levine wrote:

Are you trying to use integration studio to create an extension for UI controls? If so, that will not work as extensions are server side code and not meant for UI controls.

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.




Hi Andy, 


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


Santosh



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.