8 Replies Latest reply on Mar 21, 2018 6:56 PM by Laurent Matheo

    [View Component] Choosing actions in the property pane

    Philipp Claus



      I am currently working on a custom view component. I would like to add the possibility to add actions - the way you can do it with action buttons in the property pane.


      So far I added the following lines to the design.service.js file:


      function getRxInspector() {
      return {
           inputs: {
                rxData: {
                     act: {
                          label: 'Action',
                          type: 'rx-action-list',
                          group: 'actions',
                          index: 4


      Also I defined "act" in the config.js file:


         name: 'act',
         isConfig: true


      After deploying, the typical selection view shows up in the property pane of the component. Clicking on it does not have an effect, though.

      Also, this error occurs.


      I tried different things to make it work, without success.


      Did someone face this problem before or has a clue how to solve it? Laurent Matheo, maybe?


      Thanks in advance!


        • 1. Re: [View Component] Choosing actions in the property pane
          Laurent Matheo

          Hi Philipp Claus, sorry for the delay, it has been a hectic month


          Looking at the code it seems you are trying to mix view component and actions.

          View Components and Actions are two different things, you cannot mix-up a view component with an action code, it is not designed to work this way.

          The same way you have a structure for view component, you have one for action.


          I made a couple of examples (source code) if you want to have custom javascript actions and made some videos about it, did you give it a shot?

          Some resources / tutorials for developers (view component, rest api, javascript action etc...)


          Source code:

          GitHub - lmame/Sample-Library-Public: Sample Library Public

          Video playlist:

          Innovation Suite - Road to Customization - YouTube


          Specific videos on Actions:

          Episode 11 - [Action] Custom Action and notifications - YouTube

          Episode 12 - [Action] - Creating a synchronous JS Action + Custom Java Command, with result - YouTube

          Episode 18 - [Action] - Creating a custom Action from Scratch - YouTube

          • 2. Re: [View Component] Choosing actions in the property pane
            Philipp Claus

            Hey! I do not try to build a custom action. I tried to build in the functionality to add/remove actions to a view component. The 'rx-action-list' type creates the typical selection option, but it does not react to click events, like I already mentioned. I was not able to figure out how this functionality is implemented in the background..

            • 3. Re: [View Component] Choosing actions in the property pane
              Laurent Matheo

              Hummm I see. I don't think we thought about this use case. Technically you "could" use what we call "inspectors" for your objects but the danger of this is that it is not designed to be "public" so even if you manage to pull this off we might change it in the future thinking nobody uses it (apart from us) and break your code.


              Another way maybe would be to do "your" implementation and use the javascript rxAction method to actually call an action from javascript code.

              Creating custom actions - Documentation for Innovation Suite - BMC Documentation


              I would be curious to know the use case for this, can you share it? Would you use it for example for your own custom buttons / links (or any kind of object) when you click on it? But in your use case, would the action use one of your custom field(s), for example input text or textarea (even if you could actually rather use your view component output variables, it would be better).

              Another solution might be to find a way to trigger a button "click" for example. If you have a button and you want to execute some actions you would have "your" button tied to a "hidden" OOTB button and this button would have the actions.


              I'm pinging Robert Curlee, it might be worth creating an idea for this, the challenge is on what object to trigger the actions? If the view component is "huge" (let's say a dashboard with 3 or 4 internal buttons), on which button to "attach" the trigger (?).

              We might have to give a "name" or ID to the action(s) / OOTB button(s) and this reference would be passed to your view component to be triggered actually by your code. So rather than using "rxAction" to call one specific action we would have to create (?) a "rxActions" or something with the reference.

              1 of 1 people found this helpful
              • 4. Re: [View Component] Choosing actions in the property pane
                Philipp Claus

                In my specific case I want to use the functionality for a custom button, like you said. I thought it was nice to give non-developers the opportunity to use the custom view component naturally like they would do with any other component.

                It was easy to integrate the "Hidden" property in the property pane, but this one is way more complex.

                Triggering a hidden button with the click on the custom button could be an option. It is a detour, but a relatively easy one for the user.

                But how to tell the view component to click a button? Btw, also it would be nice to know how to check an entry of a record grid with code

                • 5. Re: [View Component] Choosing actions in the property pane
                  Laurent Matheo

                  Yes to trigger a button I don't think we have something for that yet...

                  I guess technically you could cheat in your view component looking for a specific button by its class or name using Xpath or looking inside the DOM... I did that for a pet project actually but this would be "quite" a workaround.


                  As for accessing the grid properties I wonder if it's not possible, at a point. We are using "ui-grid" angularJs component (http://ui-grid.info/ ).

                  You could try to pass the grid object itself as an input parameter, you would have to define an input parameter in your config.js file as something like:

                                      name: 'gridComponent',
                                      label: 'Select your Grid',
                                      enableExpressionEvaluation: true,
                                      editor: 'rx-expression-field'


                  You should be then able to access some methods, I guess something like:

                  refresh, setFilter, clearSearch, getSelectedRows, getFirstSelectedRow, getSelectedRowCount etc... and especially maybe the getUiGridApi() which should return the ui-grid api object, so I guess there you can do pretty much whatever you want using ui-grid own apis.

                  • 6. Re: [View Component] Choosing actions in the property pane
                    Laurent Matheo

                    Ok I found a way to make it work, I'll refine it a bit and post it here.

                    • 7. Re: [View Component] Choosing actions in the property pane
                      Laurent Matheo

                      Ok so here is a simple example. The goal is to create a view component that allows you to select a grid row.

                      It is very basic, you can select the first or second row.

                      The goal is to show how to get the "gridApi" object from ui-grid so you can use their apis from there. I will update the project I posted on gitHub with the code since you were not the first one to ask for this kind of things, but maybe this week end


                      In the meantime, the View Component expects one input parameter, which is the grid object itself:



                      So here is the input parameter you need to put into your ".config.js" file (the isRequired is up to you, same for name and label):

                                      propertiesByName: [
                                              name: 'gridObject',
                                              label: 'Grid Object',
                                              isConfig: true,
                                              isRequired: true,
                                              enableExpressionEvaluation: true,
                                              editor: 'rx-expression-field'



                      Then here is how it looks at runtime, you have two divs, click on either one of them to select a row in the grid. I didn't put checks if there were data in the grid or not, that's not the point

                      HTML code for the view component template, clicking on one div calls the scope "selectRow" method:

                          Click me to select the first row in the grid
                          Click me to select the second row in the grid




                      Here is the directive code, at least the interesting part:

                                      link: function ($scope) {
                                          var _config = $scope.rxConfiguration.propertiesByName,
                                          // Used to get the ui-grid core gridApi object
                                          function init() {
                                              if (_.isObject(_config.gridObject) && _.isFunction(_config.gridObject.getUiGridApi) && !gridApi) {
                                                  // getUiGridApiAsync() returns a promise.
                                                      .then(function (uiGridApi) {
                                                          gridApi = uiGridApi;
                                          // Selecting a specific visible row in the given grid.
                                          // Using ui-grid native apis to select a row in the grid.
                                          // selectRowByVisibleIndex():: http://ui-grid.info/docs/#!/api/ui.grid.selection.api:PublicApi
                                          $scope.selectRow = function (index) {
                                              if (gridApi) {
                                          // The grid object is loading async in the view.
                                          $scope.$watch('rxConfiguration.propertiesByName.gridObject', init);


                      Some points:

                      • The grid loads async in the view, so if you try to get the object right off the bat calling init() you will have an "undefined". Hence the $watch.
                      • To get the gridApi object, you need to call our method "gridApiAsync" which returns a promise.
                      • Once you have the gridApi object from ui-grid well you can use it however you want here I just force a selection using their methods ".selection.selectRowByVisibleIndex()".



                      This is given "as is". You can do "a lot" of things with ui-grid, for example attaching to events, creating your own rowProcessors etc... so be careful not to step on BMC own things