12 Replies Latest reply on Sep 27, 2019 11:00 AM by Laurent Matheo

    Custom View Component: Issue with display directive

    Akshay Patwa
      Share This:

      Hi All,

      I am facing an issue with Custom View Component after upgrading my SDK to 19.5.0,

      I have an existing view component in place, and upgraded my SDK from 18.11 to 19.5.

      Next, I updated html file (design.directive.html & directive.html) and deployed again, A strange thing happened, the html content got disappeared and the view went blank.

       

      All my edited View Components are gone blank when deployed (design.directive.html & directive.html)

      All the files and structure are correct as I have just edited HTML files.

       

      Not sure what went wrong?

       

       

        • 1. Re: Custom View Component: Issue with display directive
          Laurent Matheo

          Check your web browser console, I would say that the template is not loaded for some reason?

          Maybe check also your /bundle/bundle.conf.json file and compare to your previous 18.11.0 version.

          Maybe the html files are not declared there and hence not bundled in the package step.

           

          Mine looks like this, I actually to change it today because some templates in my custom actions were not packaged.

          Sample-Library-Public/bundle.conf.json at master · lmame/Sample-Library-Public · GitHub

           

           

          Especially pay attention to the templates part of both ext and app, for example:

          "templates": [
             "scripts/view-components/**/*.html",
             "scripts/actions/**/*.html"
            ]
          • 2. Re: Custom View Component: Issue with display directive
            Akshay Patwa

            Awesome move!

            That did the trick!!

             

            My bundle.conf.json did not contain any value under "templates", It worked after I added the values you provided.

            Well this did not happen when I performed upgrade to 18.11. perhaps, that needs to be mentioned in documentation.

             

            Regards,

            Akshay

            • 3. Re: Custom View Component: Issue with display directive
              Laurent Matheo

              That is a good idea

               

              I guess at some point maybe someone changed the configuration to do the separation between a lib and an app archetypes.

              I felt into the same trap you did

              • 4. Re: Custom View Component: Issue with display directive
                Akshay Patwa

                Hello Laurent,

                 

                The issue is back

                Now I have done everything right,

                • The bundle.conf.json is correct with updated entries
                • Files are correct with correct bundle ids and names
                • The component is registered in module.js file.

                 

                when we deploy it, the view component appears, but blank.

                My observation is -

                any lib/application(with existing view components) when directly deployed without changing bundle Id and name will show the VC correctly, but when I rename it, it goes blank.

                 

                We tried it with 4-5 different instances from scratch, but same issue.

                Same steps were working fine couple of months ago. Not sure what changed this time.

                 

                We have couple of demos this week. Would really appreciate if I get any help from you

                • 5. Re: Custom View Component: Issue with display directive
                  Laurent Matheo

                  What did you rename exactly? The view component name?

                  If you create a new view component is it working?

                  • 7. Re: Custom View Component: Issue with display directive
                    Akshay Patwa

                    Yes, I copied the existing one and renamed the view component name with new name.

                    New view component - I copy the js and html files from existing view component and use as template for new view component, but even this is displaying blank.

                    • 8. Re: Custom View Component: Issue with display directive
                      Akshay Patwa

                      ext folder does not get created automatically when I deploy library using maven archetype. Should I create it manually?

                      • 9. Re: Custom View Component: Issue with display directive
                        Laurent Matheo

                        I am confused, so the library is just upgraded or is it a new one where you copy code in?

                        • 10. Re: Custom View Component: Issue with display directive
                          Laurent Matheo

                          I tried to create a new library and I had to create some new folders and files. So here on the left it is a new library and on the right the same library but with one new component. And it works in design and run time:

                           

                          Added for styling:

                          /webapp/resources/sass/partials: will contain my custom css,

                           

                          /webapp/resources/sass/com.example.samplelib-ext.scss: will declare my scss files for design time.

                          @import "<%= standardlibTarget %>/resources/sass/partials/core/variables";
                          @import "<%= standardlibTarget %>/resources/sass/partials/core/mixins";
                          

                           

                          /webapp/resources/sass/com.example.samplelib.scss: will declare my scss files for runtime.

                          @import "<%= standardlibTarget %>/resources/sass/partials/core/variables";
                          @import "variables";
                          

                           

                          /webapp/resources/sass/_variables.scss: some BMC internal references

                          $vendor-path: "<%= standardlibTarget %>/lib";
                          $dpl-path: $vendor-path + "/bmc-dpl-2.9.0";
                          $img-path: $dpl-path + "/dist/assets/";
                          $font-path: $dpl-path + "/vendor/fonts";
                          
                          $rx-path: "<%= standardlibTarget %>";
                          $rx-image-path: $rx-path + "/resources/images";
                          $rx-font-path: $rx-path + "/resources/fonts";
                          

                           

                           

                          Added for scripts / view components:

                          /webapp/scripts/ext/ext.module.js:  will contain components / actions declarations for design time,

                          (function () {
                              'use strict';
                          
                              angular.module('com.example.samplelib-ext', []);
                          })();
                          

                           

                          Modified bundle.conf.json to reference the files:

                          {

                              "bundle": {

                                  "id": "com.example.samplelib",

                                  "version": "0.0.1",

                                  "src": "./src/main/webapp",

                                  "target": "./target/web-build/webapp",

                                  "coverage": "./target/coverage",

                                  "resources": [

                                      "./",

                              "$RX_SDK_HOME/standardlib"

                                  ],

                                  "options": {

                                      "livereload-port": 39005,

                                      "skip-tests": true,

                                      "skip-validation": true,

                                      "api-host": "localhost",

                                      "api-port": 8008,

                                      "api-https": false,

                                      "host": "localhost",

                                      "port": 9005

                                  },

                                  "packages": {

                                      "lib": {

                                          "scripts": [],

                                          "styles": []

                                      },

                                      "app": {

                                          "scripts": [

                                              "scripts/**/*.global",

                                              "scripts/**/*.module",

                                              "scripts/**/*.config",

                                              "scripts/**/*.routes",

                                              "scripts/**/*.constant",

                                              "scripts/**/*.filter",

                                              "scripts/**/*.value",

                                              "scripts/**/*.run",

                                              "scripts/**/*.service",

                                              "scripts/**/*.class",

                                              "scripts/**/*.directive",

                                              "scripts/**/*.controller",

                                              "scripts/**/*.resource",

                                              "!scripts/*",

                                              "scripts/com.example.samplelib.module",

                                              "scripts/*"

                                          ],

                                          "styles": [

                                              "resources/sass/com.example.samplelib"

                                          ],

                                          "templates": [

                                              "scripts/**/*.html"

                                          ]

                                      },

                                      "ext": {

                                          "scripts": [

                                              "scripts/actions/**/*.global",

                                              "scripts/actions/**/*.module",

                                              "scripts/actions/**/*.config",

                                              "scripts/actions/**/*.routes",

                                              "scripts/actions/**/*.constant",

                                              "scripts/actions/**/*.filter",

                                              "scripts/actions/**/*.value",

                                              "scripts/actions/**/*.run",

                                              "scripts/actions/**/*.service",

                                              "scripts/actions/**/*.class",

                                              "scripts/actions/**/*.directive",

                                              "scripts/actions/**/*.controller",

                                              "scripts/actionss/**/*.resource",

                                              "scripts/view-components/**/*.global",

                                              "scripts/view-components/**/*.module",

                                              "scripts/view-components/**/*.config",

                                              "scripts/view-components/**/*.routes",

                                              "scripts/view-components/**/*.constant",

                                              "scripts/view-components/**/*.filter",

                                              "scripts/view-components/**/*.value",

                                              "scripts/view-components/**/*.run",

                                              "scripts/view-components/**/*.service",

                                              "scripts/view-components/**/*.class",

                                              "scripts/view-components/**/*.directive",

                                              "scripts/view-components/**/*.controller",

                                              "scripts/view-components/**/*.resource",

                                              "scripts/ext/**/*",

                                              "scripts/ext/ext.*"

                                          ],

                                          "styles": [

                                             "resources/sass/<%= bundle.id %>-ext"

                                          ],

                                          "templates": [

                                              "scripts/view-components/**/*.html"

                                          ]

                                      }

                                  }

                              }

                          }

                           

                          2019-09-26_11-03-06.png

                           

                          I wonder if you could create an application bundle and grab the missing files...

                          • 11. Re: Custom View Component: Issue with display directive
                            Akshay Patwa

                            Hey Thanks Laurent, You are always there to save us

                            Appreciate your interest to make this work

                             

                            So, we were trying for both new lib and existing lib, by coping existing VC file structure.

                            What I observe was, if we rename only bundle ID and lib name without renaming VC name, it works perfect, but If I change the VC name as well, it gives issues.

                            I made it working this way.

                             

                            I shall make some VCs and do more findings.

                            • 12. Re: Custom View Component: Issue with display directive
                              Laurent Matheo

                              Hummm that is strange because it is just built inside one js file at the end... Usually it happens when we forget a references somewhere, like in the main module.js or in the ext module or if a path is not correct anymore between the directive and the html.

                               

                              It is good if it is working now...