It is currently 5 August 2020, 10:50 Advanced search

Integration between INDE, Syncfusion and jQuery - a PKMS

Questions and answers on how to best use Instant Developer

Integration between INDE, Syncfusion and jQuery - a PKMS

Postby IndeJones » 10 August 2019, 15:18

I have found on the blog questions about the integration with third party controls so I have decided to post this topic.
In the attachment there is an example that I have build in my spare time as an hobby to test the use of INDE (express version 18.5 r9) together with jQuery and some Syncfusion controls (Community Edition Licence) to build a Personal Knowledge Management System (PKMS).
The software graphical user interface (see the image) is splitted in two parts. In the left part there is a treeview. The nodes of the treeview (that can be added or removed by the user) are the topics where to classify your knowledge. In the righ part there is a richtexteditor where you can write the content of the topic. The idea behind this is that one of organizing your knowledge as the typical scheme of the index of a book (or the typical schema of a Work Breakdown Structure (WBS) for that ones that know some project management).
The Syncfusion richtexteditor control allow to add also tables and links to images, videos and web pages.
The application use an access database and to work it needs an internet connection since some JS files are downloaded from a CDN.
The application is a beta and so you could find some unexpected behaviour.
The JS and INDE code are commented.
You can find the same topic also in the italian section entitled: "Integrazione fra INDE, Syncfusion e jQuery - un PKMS".

Have nice integrations! :D
Attachments
PKMS_by_IndeJones.zip
(571.94 KiB) Downloaded 141 times
PKMS.png
PKMS.png (84.55 KiB) Viewed 1992 times
IndeJones
 
Posts: 9
Joined: 9 August 2019, 15:06

Re: Integration between INDE, Syncfusion and jQuery - a PKMS

Postby john w » 19 August 2019, 12:59

We really appreciate this kinds of posts. We find them very useful. Thanks for taking the time to create and share it.
Regards

John W
User avatar
john w
 
Posts: 609
Joined: 24 October 2012, 16:29
Location: Apple Valley, Minnesota USA

Re: Integration between INDE, Syncfusion and jQuery - a PKMS

Postby ljwilson » 20 August 2019, 12:17

Yes, thank you for posting this. Amazing what InDe can do (in the right hands :-) without a lot of code!

...jack
ljwilson
 
Posts: 528
Joined: 26 November 2013, 14:15

Re: Integration between INDE, Syncfusion and jQuery - a PKMS

Postby rjberry » 24 October 2019, 15:16

IndeJones,
Thanks for the post. I am trying to use your app to learn how to implement the syncfusion mapping and other controls. Is there a little more detail instruction on how to create a new app using these controls. like a step by step instruction that is as universal as possible so we can add syncfusion to our apps?

Thanks,
Rob Berry
rjberry
 
Posts: 19
Joined: 12 November 2013, 13:58

Re: Integration between INDE, Syncfusion and jQuery - a PKMS

Postby IndeJones » 3 November 2019, 22:49

Hi rjberry,
sorry for the late in the answer. I will try to give you some practical advices, but before I have to do some philosophical thougts about generalization:
I have to say that a general universal approach is not completely possible due to the particular javascript framework that you decide to use. I mean that a plain Javascript approach is in some way different from a jQuery approach that is in some way different from an Angulr way of thinking and so on…
I have also to say that, for a particular approach (lets say the jQuery one), you can arrive to some sort of generalization and after have done that you can try to generalize for another one. In this process you surely find out similarities between the two approaches but there will be always some way of writing things that is a core for that approach that is not a core for another. As an example think to the jQuery plugin system. A plugin is nothing more than a function that transform an HTML tag into something else and you write it like this: $("#html_tag_id").MyPlugin({…some options…}). In plain vanilla javascript you should have a function to which you pass your html tag id and in the body of the function you select that DOM element and manipulate it to trasform it in something else. So in plain vanilla javascript you should have something like: function MyPlugin(html_tag_id, {…some options…}) {…body of the function…}. Under the hood the two approaches arrive to the same and at the end ther is some code that manipulate the DOM but the point from where you start is in some way different.

Said this, I can try to give you some general advices.
1)the first step is to try one of the complete examples that you find in the web site of Syncfusion in your machine outside of the INDE platform: you choose your licence, you download all the library stuff and install it.
Then, in the installed directories, you find the example that you are interested in and open it in a general purpose web development IDE (as Netbeans, Visual Studio, Visual studio code, Eclipse or some other….).
The really important thing here is that you can run that example in a browser with the ability to edit the code to make some experiment , some change of it in a in a fast way.
2)the second step is the exploration of the working code looking at the a)widget properties that are used and the 2)widget methods/functions that are used and find the information about them in the documentation. This is important to understand how the things are happening and while doing so trying to add functionalities using other properties and methods you can find into the documentation. It is not important that they are the functionalities that you want. It is important the exploration of them.
3)start adding some click event to your control and in it pop up an alert. Lets say: alert('Hallo :D');
4)the english manual the paragraph 11.5 "Including HTML components" explains how to put html and javascript into a static field. Try to substitute all your working example inside a static field.
5)the english manual the paragraph 11.4.6 "Inject events via javascript" explains how to comunicate with INDE so now Substiitute the alert('Hallo! :D'); instruction at the point 3) with the instruction SendCommand(''Hallo! :D'') you have found in the paragraph 11.4.6.
6)debug mixing INDE debug with the browser debug (F12 in Chrome)
7)explore the differences between this way of doing integration compared to the way I do the integration. Maybe in your specific case you could find another possible way to integrate the stuff.

I hope all this can help! :D

Nice coding!
IndeJones
 
Posts: 9
Joined: 9 August 2019, 15:06

Re: Integration between INDE, Syncfusion and jQuery - a PKMS

Postby john w » 4 November 2019, 14:59

Thanks for what I consider valuable advice for anyone looking to use SyncFusion with InDe. I have read your post a couple of times and the references to the manual are very helpful.

I really appreciate you taking the time to share this information with us.
Regards

John W
User avatar
john w
 
Posts: 609
Joined: 24 October 2012, 16:29
Location: Apple Valley, Minnesota USA

Re: Integration between INDE, Syncfusion and jQuery - a PKMS

Postby rjberry » 13 November 2019, 18:25

Hi all,
I contacted Syncfusion about using their control in inde. they say they cant download it but in any case they offered the following code. I think I got part 1 and 2 but the 3rd I am stumped. the IDVariant part. I did try to add the idvariant to the formatmessage in inde but that failed. So, cant anyone shed some light on how to use this code?
this coe is based on a test app I was working on. they put the name of the file the code should go indo on the top of each code block.
Thanks for the help!
Rob

Desktop.html:
Code: Select all
<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:
Code: Select all

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:

Code: Select all
   
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())
rjberry
 
Posts: 19
Joined: 12 November 2013, 13:58

Re: Integration between INDE, Syncfusion and jQuery - a PKMS

Postby IndeJones » 15 November 2019, 17:53

Hi rjberry,
for what I can see from Desktop.html, Custom3.js and NeForm.cs you have posted here I can say these things:
-if the full Desktop.html has the two lines of code you posted here at the end of it and
-if the Custom3.js contains only the code you have posted here and
-Desktop.html and Custom3.js are embedded in the custom directory of the project
-the only thing you have to correct is the IDVariant question...:
1) do not consider IDVariant at all (it is the C# code that is produced not JavaScript)
2) for what I see from the cs it means that in your INDE code you have written something like this:
YourFIeldName.text = formatMessage([...YourHTMLCode...]). Well write in the INDE IDE (not in the NewForm.cs code) what follows:
YourFIeldName.text = "<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>"
3) do not use formatMessage for your string. In your case I do not see parameters in your string (read about the formatMessage function in the documentation...)

I think it could work...:D

Regards
IndeJones
 
Posts: 9
Joined: 9 August 2019, 15:06

Re: Integration between INDE, Syncfusion and jQuery - a PKMS

Postby rjberry » 15 November 2019, 20:09

IndeJones,

**** UPDATE *** just entered the webdebugger and it is saying the function dataSampleGuage2() is undefined but it is in the custon3.js file. how do i get it to read the custon3.js file?
Thanks for the reply. I have done what you said and I get the 'click' button but the gauge isnt showing. I see there is the pointer[0].string which I belive is where the data is stored. Wonder if I need to load that first and it wont show anything if its empty? would this be a json type string with all the options/values for the gauge?
Thanks for the help. I am sure I am not the only one wanting to use syncfusion or the like.
Best Regards,
Rob
rjberry
 
Posts: 19
Joined: 12 November 2013, 13:58

Re: Integration between INDE, Syncfusion and jQuery - a PKMS

Postby IndeJones » 17 November 2019, 15:12

Hi rjberry,
-first control that the file is custom3.js (you have written custon3.js)
-then make sure that custom3.js is in the custom directory and that the custom directory has been embedded in INDE project (you can put all the things that you want in the custom directory but if you do not embed it in INDE you will never have its content copied in the compilation process)
-pay attention to the content of the file custom3.js. It must be only valid javascript syntax!. If you put in it a single character that is not javascript syntax, it is invalid and the debugger can tell you that the function is not present
-then it should work...:D

best regards
IndeJones
 
Posts: 9
Joined: 9 August 2019, 15:06

Next

Return to Tips & Tricks

Who is online

Users browsing this forum: No registered users and 2 guests