13 Replies Latest reply on Sep 13, 2017 10:18 AM by Laurent Matheo

    How do we add our own resources e.g. images, java script etc. to a custom View-Component?

    stephen Grant
      Share This:

      How do we add our own resources e.g. images, java script etc. to a custom View-Component in eclipse.

      I have tried various locations.

        • 1. Re: How do we add our own resources e.g. images, java script etc. to a custom View-Component?
          Laurent Matheo

          Hi Stephen

           

          Ok so there are several areas in your question so I'll answer area per area.

           

           

          I°) How to add a javascript?:

          I guess you are talking about a third party javascript library (like google map) or something?

          It is possible.

          It was part of the tutorial at some point but has been pulled out as we are going to review some examples.

           

          In the meantime, I will describe the concept and try to give you an example. I will often refer to this thread:

          Re: Unable to deploy google map component

           

          1° Concept:

          If you need a js library that is not bundled with the standard library we provide (for example we provide d3, angularjs etc...), the idea is to:

          • Put the js lib in your project,
          • Use it into your code,
          • Declare the lib in the "bundle.conf.json" file so it will be inserted in the bundle you deploy in Innovation Suite,

           

           

          2°) Example:

          Let's say that we are in this thread (Re: Unable to deploy google map component ).

          You have two libraries to use in your project that BMC does not ship, angular-map and angular-ui-event.

           

          In your project, you can create a "/lib/" folder in your "/webapp/" folder, such as:

            • "/bundle/src/main/webapp/lib/angular-ui-map-0.5.0/event.min.js"
            • "/bundle/src/main/webapp/lib/angular-ui-event-1.0.0/ui-map.min.js"

           

           

          If one of those libs are angular modules, you need to declare them in your view component modules as dependency, but that is more an AngularJS pre-requisites than a BMC one , so for example. This way you can use them in your View Component's code:

              angular.module('com.example.geo-util-lib.view-components.google-map', [        'ui.map',

           

          At last you have to declare those libs so we insert them in the bundle sent to Innovation Studio for deployment. You have to do this in your project "/bundle/bundle.conf.json" file in the "app" and "ext" "scripts" sections, as follow:

          As you can see:

          • You do not have to put the ".min.js" file extension,
          • The path begins to the "/main/webapps/" so that's why you have only "lib/",

                      "app": {

                          "scripts": [

                          "lib/angular-ui-event-1.0.0/event",

            "lib/angular-ui-map-0.5.0/ui-map",

          (...)

                      "ext": {

                          "scripts": [

                                  "lib/angular-ui-event-1.0.0/event",

            "lib/angular-ui-map-0.5.0/ui-map"

           

           

          II°) How to add a css and a picture and use it?:

          I will cover both in a single chapter. The goal is to have a picture in the project, use it in a custom css class and use this class in my view component.

           

          1°) Concept:

          a°) picture:

          Simply create a folder, put pictures inside of it and use them.

           

          b°) css:

          The best practice is to put your css as a scss in the resources/sass folder and to import this file in the main css file.

           

           

           

          2°) Example:

          Ok the concept was easy, let's check the example

          Let's say I want to create a view component "test-me" and I want to use in my html code of my view component a "dog.png" image and this image is defined in a css class.

          So the view component will be in:

          /bundle/src/main/webapp/scripts/view-components/test-me/

           

           

          a°) picture:

          I will put this file in a folder "/img/" I created in the "/webapp/resources/" folder:

          /bundle/src/main/webapp/resources/img/dog.png

           

          b°) create a css class:

          You have a folder where the "partials" of your projects are:

           

          /bundle/src/main/webapp/resources/sass/partials/

           

           

          Inside of this folder let's create a css file for the view component "testme". I will create a file "_testme.scss" with inside this css class "dog".

          As you can see, I reference in this file my "dog.png" picture with a relative path (down two folders then the picture path):

          .dog {
            height: 16px;
            width: 16px;
            background: url(../../resources/img/dog.png) no-repeat 0px 0px;
            display: inline-block;
            vertical-align: middle;
            margin-left: 5px;
            margin-right: 5px;
            cursor: hand;
            cursor: pointer;
          }
          

           

           

          Then you have to declare this "_testme.scss" file in the project main css file which is in this folder:

          /bundle/src/main/webapp/resources/sass/

          The main scss file name should be your bundle name so for example:

          com.example.taskmanager.scss

           

          Inside of it, simply "import" your scss file (without the leading "_" and without the ".scss" file extension), so for "/partials/_testme.scss":

           

          @import "partials/testme";

           

           

          Then you are good to use the class in your view component

           

          c°) Using the class in your view component:

          Well it's a css class so just use it in html:

          <span class="dog"></span>
          

           

           

          You can of course use pictures directly in your html code, you don't need to go through a class, it was just to merge two examples. In this case use the relative path.

          5 of 5 people found this helpful
          • 2. Re: How do we add our own resources e.g. images, java script etc. to a custom View-Component?

            Laurent Matheo How would I add fonts/icons that also came with a third party java script library? In the bundle.conf.json there are scripts, styles, and templates. I was able to get this library to work but the icons are not showing up correctly without the eot, svg, ttf, and woff files.

            • 4. Re: How do we add our own resources e.g. images, java script etc. to a custom View-Component?
              Laurent Matheo

              You can do it the same way as you do for pictures.

              It depends on the library really. Some of them expect to be in the "root", others next to your javascript library.

               

              The trick would be to deploy your lib / app and display the app in chrome. Hit F12 to see the developer tools. Go the "Network" tab and see what is the url called for the glyphs or icons or fonts. It should be http 404 error (page not found). The url will be very important because it will tell you where the library is expecting the resources.

              Then you can "backtrack" and put the fonts/images in the right folder.

               

              Can you post here the http 404 errors and the url it tries to call? It would give us an idea.

              • 5. Re: How do we add our own resources e.g. images, java script etc. to a custom View-Component?
                Klaus Sauer

                If you want to use your css in Innovation Studio (as preview of your view component) you have to import the css in the ...-ext.scss file.

                In Laurent Matheo's example it would be the file com.example.taskmanager-ext.scss in the same foldere like com.example.taskmanager.scss

                 

                 

                @import "partials/testme";  

                 

                This could be helpful, if you use a special lib and css for graphs, e.g. vis.js/css for timelines.

                 

                Klaus

                • 6. Re: How do we add our own resources e.g. images, java script etc. to a custom View-Component?
                  Tobias Buehl

                  Laurent Matheo how can I use a custom css class to edit the style of a container?

                   

                  Thank you

                  • 7. Re: How do we add our own resources e.g. images, java script etc. to a custom View-Component?
                    Laurent Matheo

                    Hi Tobias

                     

                    The main idea is to create a css class and add it into a view component. Then you can use the class.

                     

                    In details:

                    • Create (or use an existing view component),
                    • Create a .scss file,
                    • Inside this .scss, create a class for example:

                    .test-ct-red {
                        border-style: solid;
                        border-width: 1px;

                        border-color: red;

                    }

                    • Add the .scss to your view component as described earlier.
                    • Deploy your View Component,

                     

                    Your class will not appear in the list so don't be surprised. You need to type in the "Add Style" your class name so here:

                    test-ct-red

                    And hit the "Enter" key. You should see then that the style has been added to a list (you will see your class name with a "x" icon to remove it) so something like that:

                    2017-09-06 09_11_57-.png

                     

                    You will not see the class applied during design time in the View Designer, you need to "Preview" your view for this or run the application and access the view

                    1 of 1 people found this helpful
                    • 8. Re: How do we add our own resources e.g. images, java script etc. to a custom View-Component?
                      Tobias Buehl

                      Thank you.

                      But i figured out, that i dont have to customize the css of a container but of a record grid.

                      For record grids there is no option for selecting own css classes :-(

                      • 9. Re: How do we add our own resources e.g. images, java script etc. to a custom View-Component?
                        Laurent Matheo

                        No we don't. What kind of customization you wanted to do. You could overwrite the class using your own style but that might overwrite all grid style and applying it to one specific grid would involve some css trickery.

                        • 10. Re: How do we add our own resources e.g. images, java script etc. to a custom View-Component?
                          Tobias Buehl

                          I want to change the margin-top.

                          If you have a container with 2 cols and put a record grid in one column and a record editor in the other it looks like this:

                          (There is another 2-col-container inside the record editor)

                          • 11. Re: How do we add our own resources e.g. images, java script etc. to a custom View-Component?
                            Laurent Matheo

                            Well you could override the default margin-top but this would impact everything so what I would do is:

                            • Create a css class, like "padding-ct" with the margin-top or height,
                            • Put a container before the record editor,
                            • Apply the css style to this container,

                             

                            So the idea is to use the container as a padding.

                            • 12. Re: How do we add our own resources e.g. images, java script etc. to a custom View-Component?
                              Tobias Buehl

                              Hi,

                               

                              i tried to add my css to a library and use it in an application.

                              But it doesn't find the library css.

                               

                              Is there something else i have to do in the lib?


                              Thank you,
                              Tobias

                              • 13. Re: How do we add our own resources e.g. images, java script etc. to a custom View-Component?
                                Laurent Matheo

                                When you add a .scss file you have a couple of things to be careful of and that are described in the steps above:

                                 

                                Inside of this folder let's create a css file for the view component "testme". I will create a file "_testme.scss" with inside this css class "dog".

                                As you can see, I reference in this file my "dog.png" picture with a relative path (down two folders then the picture path):

                                 

                                 

                                1. .dog { 
                                2.   height: 16px
                                3.   width: 16px
                                4.   background: url(../../resources/img/dog.png) no-repeat 0px 0px
                                5.   display: inline-block
                                6.   vertical-align: middle
                                7.   margin-left: 5px
                                8.   margin-right: 5px
                                9.   cursor: hand; 
                                10.   cursor: pointer

                                Then you have to declare this "_testme.scss" file in the project main css file which is in this folder:

                                /bundle/src/main/webapp/resources/sass/

                                The main scss file name should be your bundle name so for example:com.example.taskmanager.scss Inside of it, simply "import" your scss file (without the leading "_" and without the ".scss" file extension), so for "/partials/_testme.scss":

                                1. @import "partials/testme"

                                 

                                Then the class should be available at runtime. So maybe you missed the @import in the lib main scss file?