3 Replies Latest reply on Apr 1, 2016 2:08 PM by rashedtalukder

    Add-on:How to reference own icons/images?

    o.wagner

      Hi all,

       

      I am developing an (jiive hosted) add-on by using the jive node sdk. I've come very far and there are a lot of cool features, but now I stuck at a point where I want to use my own icons/images.

       

      What works:

      I have an Icon in apps/simpleapp/public/dist/assets/. If I reference it in my canvas.html which is referenced in the <Content type/> section of the app.xml, the image is correctly displayed (jive refers to jiveUrl/resources/add-ons/.../.../apps/simpleapp/dist/assets/icon.png).

      Another way that works is referencing the icon relative as background image in the css that is referenced in the canvas.html. But since I've got a lot of Icons, I don't want to use that way.

       

      What does not work / what I want to do:

      Using another javascript file (referenced in the canvas.html) that tries to access the icon. I've tried a lot of ways to access it, but it also gets redirected to jiveUrl/gadgets/whateverIWriteInMyJS.

      It seems like jive can only resolve/replace such assets that are referenced in whatever you reference in your app.xml, but when it goes some steps deeper, it doesn't work anymore.

      Is there any way to get this working / has anybody ever experienced this behavior? Ryan Rutan?

       

      Thanks in advance

      Onke

        • Re: Add-on:How to reference own icons/images?

          Would it be possible for you to paste maybe an example of your JS where you're trying to push the image into the doc? In my own experience of loading all the assets in the public/ folder, I can retrieve those assets from both my HTML and JS files by referencing to "images/X.png". However I haven't moved it so maybe there a different challenge.

            • Re: Add-on:How to reference own icons/images?
              o.wagner

              Sure. "Root" folder is apps/simpleapp/public/. Images are in apps/simpleapp/public/dist/assets/images/. I build the add on with the jive-sdk build add-on --apphosting="jive" command.

              Snippet from app.xml:

               <Content type="html"
                        view="home,place-all-tab"
                        href="dist/canvas.html"
                        preferred_height="800" />
              

              Snippet from dist/canvas.html (note the comment of what works):

              <html>
              <head>
                  <link rel="stylesheet" href="dist/stylesheets/main.css" type="text/css" media="screen" />
                  <script type="text/javascript" charset="utf-8" src="dist/javascripts/main.js"></script>
              </head>
              <body>
              <!-- If I do the following line, it works:
              <img src="dist/assets/images/awesomeIcon.png"/>  -->
              </body>
              </html>
              

              and if I do something like this (compiled angularjs, source snippet with the relevant html part out of browser) in dist/javascripts/main.js, it does not work:

              angular.module("awesomeApp").run(["$templateCache", function(e) {
                    e.put("app/projectfile/documentcard.directive.html", '<img src=dist/assets/images/awesomeIcon.png')
              }
              ]);
              

              also for the img src something like

              /dist/assets/images/awesomeIcon.png
              ./dist/assets/images/awesomeIcon.png
              ../dist/assets/images/awesomeIcon.png
              ../assets/images/awesomeIcon.png
              

              doesn't work either.

              All the resources are on the server, i.e., if I move to jiveUrl/resources/add-ons/.../.../apps/simpleapp/dist/assets/images/awesomeIcon.png the icon is shown correctly.

               

              Thanks

              Onke

                • Re: Add-on:How to reference own icons/images?

                  Do you know what the path is that your browser/framework is interpreting whenever you're giving relative paths (e.g. ./, ../, /)?

                   

                  My workaround suggestion would be to place a 1px x 1px (or hidden) image and read the URL. Then trim out your known relative path and prepend that to your other assets so they have an absolute to load with.

                   

                  The other option is to move everything to your {{app name}}/public/ directory and one level of subdirectories for your images, js, and css. (see jive-sdk create app on the Node Jive SDK).