How to use jQuery in Simplifier

Tagged:
  • Christian
        2 years ago #30282

        Hi all

        I was rather sure that I can use the jQuery library in Simplifier (Process Designer Scripts and Client-side Business Objects). But I don’t find an entry point… do I have to integrate jQuery first or is it built-in? If it is built-in, why do I get a console error “…draggeable() is not a function” (even though this is a jQuery default)?

        Thank you!

        Best regards

        Christian

        Christian
            2 years ago #30294
            Up
            1
            Down
            ::

            Hi

            as promissed, here the solution (thanks Armin for the inputs):

            • Add the jQuery UI library in the “applications” area (screenshot “library”). Import: dependency to UI5 and adding the CSS style
            • Using the library in the concrete app (screenshot “include”)
            • Create DOM elements and set CSS classes according to jQuery documentation (screenshot “dom”)
            • Set element to be draggable in an “onAfterRendering” triggered JS code snippet (screenshot “code”). Important: when selecting the element via its id, use “#”, as well.

            Should work 🙂

            Attachments:
            You must be logged in to view attached files.
            Armin Winkler
                Has successfully completed the online course Introduction
                Has successfully completed the online course Intermediate (200)
                Has successfully completed the online course Advanced (300)
                Has successfully completed the online course Basics (100)
              2 years ago #30283
              Up
              0
              Down
              ::

              Hi Christian,

               

              in every OpenUI5 application created with Simplifier you should be able to use jQuery by invoking a function from the library on the self-named object, i.e. “jQuery”. Alternatively, you can also access the library via the shortcut “$”. Yes indeed, the jQuery library is built into OpenUI5 and thus loaded on app start for every application. If you need to get a jQuery object of any widget included in your application, you can first get that widget via ID and then invoke the “$” function on it. Here’s the API reference for this function: https://sapui5.hana.ondemand.com/#/api/sap.ui.core.Element%23methods/$

               

              Hope this helps!

               

              Regards,

              Armin

              Christian
                  2 years ago #30284
                  Up
                  0
                  Down
                  ::

                  Cool, thank you for the fast answer! When I look at https://sapui5.hana.ondemand.com/#/api/jQuery%23methods, only a very small set of jQuery functions is available, is this correct?

                  I would like to use this: https://jqueryui.com/draggable/#default

                  For this, I have a Script snippet in my Process Designer:

                  $(“Screen1–Button1”).draggable();

                  When I load the page, I get this console error:

                  Uncaught (in promise) TypeError: $(…).draggable is not a function
                  at f.onAfterShow (/appDirect/JQueryTest/controller/Screen1-dbg.controller.js?eval:41:26)
                  at j (/system-library/OpenUI5/1.71.22/resources/sap-ui-core.js:984:230)
                  at f.d._handleEvent (/system-library/OpenUI5/1.71.22/resources/sap-ui-core.js:984:378)
                  at f.b.onAfterRendering (/system-library/OpenUI5/1.71.22/resources/sap/m/library-preload.js:3652:511)

                  Armin Winkler
                      Has successfully completed the online course Introduction
                      Has successfully completed the online course Intermediate (200)
                      Has successfully completed the online course Advanced (300)
                      Has successfully completed the online course Basics (100)
                    2 years ago #30285
                    Up
                    0
                    Down
                    ::

                    Hi Christian,

                     

                    no that is not correct, the functions listed under the link you provided are additional functions added by OpenUI5 which are not standard for jQuery. You should definitely be able to execute any regular jQuery function in your applications built with Simplifier. However, I’m afraid you won’t be able to use the draggable function as it’s part of the jQuery UI library, not the original jQuery library. If you want to include jQuery UI in your application, you can still try to add it as a dependency following these instructions: https://community.simplifier.io/doc/current-release/extend/integrate-external-libraries/ (please also take a look at the subpages)

                     

                    Regards,

                    Armin

                    Christian
                        2 years ago #30286
                        Up
                        0
                        Down
                        ::

                        Hi Armin

                        cool, thank you, this sounds promising. You say “try” to add -> are you not sure that this is possible :-)? I have checked the docu link you sent me and have some questions:

                        • The zip file structure has not to follow any convention, correct? Only the developer has to know the zip internal structure to define the correct path when including it via “addScript”
                        • jQuery core is already included in Simplifier. How can I check if there are any conflicts when I also use jQuery UI? Will I see potential conflicts (function overloading, …) when I upload the JS lib or when I deploy my app?
                        • If I include the jQuery UI library, this automatically extends the jQuery object with the draggable() function?

                        However, it is still not working 🙂 I created a ticket in the support center and will post the solution here…

                        Thank you!

                        However, it is still not working… I created a support ticket 🙂 When I have the solution I will post it here.

                        Thank you!

                         

                        Armin Winkler
                            Has successfully completed the online course Introduction
                            Has successfully completed the online course Intermediate (200)
                            Has successfully completed the online course Advanced (300)
                            Has successfully completed the online course Basics (100)
                          2 years ago #30288
                          Up
                          0
                          Down
                          ::

                          Hi Christian,

                           

                          I meant to say that I am not familiar with the jQuery UI library and thus do not know about any potential dependencies for that library or if it can be used in the browser only. These are usually the prerequisites / restrictions when searching for a JS library to add to an application built with Simplifier. I’ve downloaded the zip file of the library in the meantime and it seems jQuery UI can be used as an extension of your app perfectly fine. Let’s get to your questions now:

                           

                          – Yes, you can leave the structure of the zip file unchanged or you can rearrange them the way it works best for you. In the addScript function then you include the path to the (minified) .js file as the first argument. Adding a new JS library to Simplifier usually only needs to be done once and from then on every developer on your Simplifier instance is able to easily add it as a dependency to their apps by the click of a button. Once correctly configured and uploaded, the structure of the zip file is not important anymore.

                          – Technically speaking, jQuery core is integrated into the OpenUI5 framework that every application created with Simplifier uses. As for example the Simplifier UI / frontend is also a UI5 application, jQuery can therefore be accessed from there as well. You would see potential conflicts as soon as you’ve deployed an application that has the newly added jQuery UI set as dependency and run the app. From what I can see in the source code file of jQuery UI, it simply extends the jQuery object by adding another reference under the key ui, i.e. any function added by jQuery UI should be accessible via “jQuery.ui” or “$.ui”

                           

                          If you need further guidance, I would also recommend you to take a look at the libraries that are already included in our standard content package and how the addScript / addStyle functions look like for them. I will also get back to you in your support ticket as soon as it’s there in our system.

                           

                          Regards,

                          Armin

                           

                           

                        Viewing 7 posts - 1 through 7 (of 7 total)

                        You must be logged in to reply to this topic.