Integration in instantdeveloper

[Robert Berry]

Hi,

Has anyone intergrated syncfusion into instantdeveloper? If so can you share some insight on how?

Thanks,

Rob Berry

[Davis Jebaraj]

Hi Rob,

It appears that you have to follow the instructions for adding a HTML component to InstantDeveloper and they have a sample here http://forum.progamma.com/viewtopic.php?f=2&t=181&p=822&hilit=file+upload#p822

We can look into this further if you let us know what Syncfusion component you are interested in.

Thanks,

Davis

[Robert Berry]

Davis,

Thanks for the response and I am having a good look at the sample app you pointed me. I want the use the following:

Maps

Signature

and the various gauges.

I dont know if you have access to instantdeveloper so here is the main line in the load event for the application. I know many instantdeveloper developers would be very interested in how to easily use your components in their apps.

NuovoPannello.EtichettaNuovoUpload.text = formatMessage("<form id="file_upload_empty"></form><form id="file_upload" action="?WCI=IWFiles&WCE=|1" method="post" 

         enctype="multipart/form-data">  <input type="file" name="file" multiple>  <button>Upload</button>  <div>Drop images here!</div></form><table id="files">­

         </table><!--scr>  $("#file_upload").fileUploadUI({    uploadTable: $("#files"),    downloadTable: $("#files"),    buildUploadRow: function (files, 

         index) {      return $("<tr><td>" + files[index].name + "<\\/td>" +        "<td class=\\"file_upload_progress\\"><div><\\/div><\\/td>" +        "<td 

         class=\\"file_upload_cancel\\">" +        "<button class=\\"ui-state-default ui-corner-all\\" title=\\"Cancel\\">" +        "<span class=\\"ui-icon ui-icon-

         cancel\\">Cancel<\\/span>" +        "<\\/button><\\/td><\\/tr>");    }  });-->", this.me(), ...)

Where do i start to get the text that gets put in the format message. Is this the equivalent to your .js file contents? how do you pass values to your components?

thanks!

Rob 

 

[Baby Palanidurai]

Hi Robert, 

Thanks for your update. 

As you said, we haven’t access to the instant developer. So, we have provided the code example of linear gauge control and kindly integrate it in instant developer. Please find the example below and replace this linear gauge code inside the formatMessage in your code. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/gaugeSample2078027856 

Since we don’t have access to the instant developer, we couldn’t try the integration at our end. And as of now we have provided linear gauge sample. If you require any other control, please let us know. Kindly check this and revert us back, if you have any concerns on the integration. We will check from our end and let you know. 

Regards, 

Baby. 

[Robert Berry]

Hi,

I tried doing as you said and that did not work. I even looked at the debug to see if it gave me any hints on why.

what other info can I provide you to assist ? I really would like to get these working. 

Thanks,

Rob

[Baby Palanidurai]

Hi Robert, 

Thanks for your update. 

We have analyzed your query. We will download the trial version of the instant developer and check the integration of our components and will update you the status on November 5, 2019. We appreciate your patience until then.  

Meanwhile, kindly share your samples in which you tried our components with  instant developer in your end. It will be helpful in furthermore analysis and provide the solution sooner. 

Regards, 

Baby. 

[Robert Berry]

Hi, 

here is my test application in instantdeveloper. I tried my best, I am new to using javascript. 

hope it helps....

Rob

Attachment: synctestcirguage_901fe5.zip

[Baby Palanidurai]

Hi Rob, 

Thanks for providing the sample. 

We will check and analyzing further on this and update you on the status within two business days (Nov 7, 2019). We appreciate your patience until then. 

Regards, 

Baby. 

[Robert Berry]

Hi,

I thought you were going to provide some feedback today per a previous message. I am in a holding state with my app till I know if syncfusion will work or do I need to look at alternate options.

Hope to hear soon,

Best Regards,

Rob

[Baby Palanidurai]

Hi Rob, 

We have tried to work on the trial version of the instant developer, but we are unable to download the trial version of the instant developer. So, we have mailed to that team that, how to integrate web controls into the instant developer. We are waiting for their response. Meanwhile, we are trying to work on your sample and checking the below guidelines link, 

https://doc.instantdeveloper.com/eng/inde-users-guide.pdf 

In the above guidelines, we are checking section 11.5 Including HTML components. As mentioned earlier, we will update you on the status on November 7th, 2019. We appreciate your patience until then. 

 

Regards, 

Baby. 

[Robert Berry]

Thanks, i have read that section a few times. I think my lack of knowing html and javascript are whats getting me stuck. 

Here is the line i am trying bases on your examples and what i can understand in section 11.4

https://content.screencast.com/users/rjberry12/folders/Snagit/media/b4e067c9-7517-4577-81f1-ca00e459e802/11.05.2019-11.47.png

Maybe if you can see where I am going wrong that would help.

Thanks,

Rob

[Baby Palanidurai]

Hi Rob, 

Thanks for your patience. 

We have analyzed your sample and integrate our EJ2 circular gauge into your sample. For that, we have added ej2.min.js script reference in your desktop.html file and then add the element in the format message to render the gauge control. In your sample, we have added the gauge in the button click event. In that button click event, we have called the gauge rendering. Please find the below code snippet to achieve this requirement. 

Desktop.html: 

 

<script src="https://cdn.syncfusion.com/ej2/17.2.46/dist/ej2.min.js"></script> 

      <!-- Customization --> 

<script type="text/javascript" src="custom3.js"></script> 

 

 

Custom3.js: 

 

function dataSampleGauge2() { 

        var dataSampleGauge2 = new ej.circulargauge.CircularGauge({ 

            // custom code start 

         load: function (args) { 

                args.gauge.height = (args.gauge.element.parentElement.parentElement.clientHeight - args.gauge.element.parentElement.children[0].clientHeight) + 'px'; 

            }, 

           // Other customization 

        }); 

       var usa = new ej.circulargauge.CircularGauge(dataSampleGauge2, '#container2');    } 

 

 

 

 

NewForm.cs: 

 

    

IDL.FormatMessage((new IDVariant("<button id=\"click\" onclick=\"dataSampleGauge2()\">Click</button><div id=\"container2\" style=\"display: block;\"></div><script id=\"usa\" type=\"text/x-template\"> <div id='templateWrap'> <img src=\"//ej2.syncfusion.com/demos/src/circular-gauge/images/athletics.png\" style=\"height:20px; width:20px;\"/><div class='des'><div>${pointers[0].value}%</div></div></div></script>" + 

          "")), (new IDVariant(MyGlb.FRM_NEWFORM))).stringValue()) 

 

Screenshots: 

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/IDSample2101984638 

Kindly revert us, if you have any concerns. 

Regards, 

Baby. 

[Robert Berry]

Thanks! I am going to try this today. I did download the sample link but it seems to be the file I sent you, was it supposed to be your version of the app?

-Rob

[Baby Palanidurai]

Hi Rob, 

 

 

Thanks for your update. 

 

 

Yes, we have modified your sample which you have sent. We will wait to hear from you. 

 

 

Regards, 

Baby. 

[Robert Berry]

Well, i have downloaded the file a couple times and i see no changes and it still only shows the double quote on the screen. Are you sure you put the correct project up on the shared drive?

Thanks for the help!

Rob

[Robert Berry]

Hi again,

Have you had a chance to put the updated project in the link? It is still my original code i sent you, not updated as you implied. 

Thanks,

Rob

[Baby Palanidurai]

Hi Rob, 

We have checked the sample and attached the sample again. Please find the below sample link, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample745019251 

Please find the below steps to run the sample. 

1.       Open the NewWebApplication10 solution file in Visual studio under the csharp folder. 

2.       Run the NewWebApplication10 project. 

We have ensured the above steps with attached sample, there is working fine at our end. 

Kindly revert us, if you have any concerns. 

Regards, 

Baby. 

[Robert Berry]

Oh, wait so these edit are done outside instantdeveloper? So everytime I regenerate the app, i have to make these changes and use Visual studio?

Not exactly an easy solution... i need to see if i can get this working inside inde as those other steps would be very time consuming

[Baby Palanidurai]

Hi Rob, 

Thanks for your update. 

Since we haven't access to instant developer, we have tried to runnable the application from which you have sent samples. Kindly change the format message and also refer the scripts as we have mentioned in our previous update to make runnable our controls into your instant developer. 

Kindly revert us, if you have any concerns. 

Regards, 

Baby.

[Robert Berry]

Hi,

I got it sort of working in inde. Just trying to figure out how to pass a value to it and some customizations.

Can you help?

Thanks,

Rob

[Baby Palanidurai]

Hi Rob, 

Thanks for your update. 

We have analyzed your query.  We have passed the values through the button click event and used it in that button click method. We have changed this in the sample project application solution. For more information about gauge customizations, kindly refer the below documentation link, 

https://ej2.syncfusion.com/javascript/documentation/circular-gauge/es5-getting-started/?no-cache=1 

Please find the below code snippet for passing the values, 

PAN_NEWPANEL.set_FieldText(PFL_NEWPANEL_USA, IDL.FormatMessage((new IDVariant("<button id=\"click\" onclick=\"dataSampleGauge2(20)\">Click</button><div id=\"container2\" style=\"display: block;\"></div><script id=\"usa\" type=\"text/x-template\"> <div id='templateWrap'> <img src=\"//ej2.syncfusion.com/demos/src/circular-gauge/images/athletics.png\" style=\"height:20px; width:20px;\"/><div class='des'><div>${pointers[0].value}%</div></div></div></script>" + 

          "")), (new IDVariant(MyGlb.FRM_NEWFORM))).stringValue()); 

 

 

 

Custom3.js: 

 

function dataSampleGauge2(value) { 

        var dataSampleGauge2 = new ej.circulargauge.CircularGauge({ 

            axes: [{ 

                // other customizations 

                pointers: [{ 

                    value: value,  

                    // other customizations 

                }] 

            }] 

        }); 

       var usa = new ej.circulargauge.CircularGauge(dataSampleGauge2, '#container2'); 

    } 

Screenshot:  

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/gaugeSample-65462623 

  

If the above doesn’t meet your requirement, kindly revert us with more details about your requirement which will be helpful in furthermore analysis and provide you the solution sooner. 

Regards, 

Baby.  

[Robert Berry]

Hi,

I got it working!!!

Now unless I am wrong, this setup requires to be online at all times. Can i use the inde custom directory to hold the syncfusion code to make a mobile app? One that doesn’t required to he online to use?

And how do I do this setup?

Thanks

Rob

[Baby Palanidurai]

Hi Rob, 

Thanks for your update. 

We have analyzed your query. Using the custom script generator, you can download the scripts and CSS for specific control with specific versions from the below site. 

https://crg.syncfusion.com/ 

From the above link, choose your control with the theme and download the file.  

We have downloaded the scripts for gauge and used it the sample. Please find the below sample link for your reference, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/customScripts1869271223 

 

Please revert has if you have any queries.   

Regards, 

Baby.