Wednesday, March 17, 2021

Customize your Toolbar (Interactive Grid #9)

  







Next to last tip no.9!


#9 Customize your Toolbar

As the previous blog entries mentioned, the interactive grid brings many out-of-the-box features on the one hand, but also many adjustments that can be made on the other. This means it is possible for the developer to customize the toolbar the way the customer wants. This article shows some examples of how you can customize the interactive grid Toolbar without much effort.

Before we can start, however, we should understand how the toolbar is structured.




As you can see in the figure, the toolbar consists of seven different menu groups (arrays) that can all be customized individually. In our example we will first hide all menu groups and then only the "action1"  menu group will be customized and displayed.


Let's start with a new application or page where we will add an interactive grid. In our example we use the table "EMP" as source. The toolbar of the interactive grid can be customized via JavaScript. For this we have to add some JavaScript Initialization Code under the attributes of the IG. First we will hide the unneeded menu groups and locate the menu group "actions1" that we want to customize.


function(config) {
    var $ = apex.jQuery,
    toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),  // Make a copy of the default toolbar
    toolbarGroup = toolbarData.toolbarRemove("search");         // Remove the search menu group
    toolbarGroup = toolbarData.toolbarRemove("reports");        // Remove the reports menu group
    toolbarGroup = toolbarData.toolbarRemove("views");          // Remove the views menu group
    toolbarGroup = toolbarData.toolbarRemove("actions2");       // Remove the actions2 menu group
    toolbarGroup = toolbarData.toolbarRemove("actions3");       // Remove the actions3 menu group
    toolbarGroup = toolbarData.toolbarRemove("actions4");       // Remove the actions4 menu group
    toolbarGroup = toolbarData.toolbarFind("actions1");         // Locate the actions menu group  
    
    // Add new control elements here

    // Assign new toolbar data back to toolbarData configuration property
    config.toolbarData = toolbarData;

    // Return the config
    return config;
}


After we have done that and started the application, we see that we have created an IG with a blank toolbar. The next step is to add some elements to the toolbar.

The most common element is probably the button. Let's add some button to the toolbar first. 
The structure is always the same. We declare a type, label, icon and an action to be executed.


    // Add new buttons
    // Note the toolbar is action driven, so we just need to define the correct action name with the button.
    toolbarGroup.controls.push({
        type: "BUTTON",
        label: "Add Row(s)",
        action: "selection-add-row",
        icon: "icon-ig-add-row",
        iconBeforeLabel: true,
        hot: true
    });    
    toolbarGroup.controls.push({
        type: "BUTTON",
        label: "Delete Row(s)",
        action: "selection-delete",
        icon: "icon-ig-delete",
        iconBeforeLabel: true,
        hot: true
    });
    toolbarGroup.controls.push({
        type: "BUTTON",
        label: "Save",
        action: "save",
        icon: "icon-ig-save",
        iconBeforeLabel: true,
        hot: true
    });


There are many default widgets for the interactive grid that we can use. For a complete reference, see the list below.




In our case we use the "Add Row", "Delete Row" and "Save Changes" action as an example, but we can also define and execute our own custom actions or trigger Dynamic Actions or an AJAX process. The next code snippet shows you how you can directly execute a JS command or trigger a Dynamic Action.  Note that you have to create the custom Dynamic Action, too.


    toolbarGroup.controls.push({
        type: "BUTTON",
        label: "My Button",
        icon: "fa fa-american-sign-language-interpreting",
        iconBeforeLabel: true,
        hot: true,
        action: "my_action"
    });
    toolbarGroup.controls.push({
        type: "BUTTON",
        label: "My DA Button",
        icon: "fa fa-play",
        iconBeforeLabel: true,
        hot: true,
        action: "my_da"
    });  
    
    config.initActions = function(actions){
        actions.add({
            name: "my_action",
            actionfunction() {
            alert('Hello World');
            }
        });
        
        actions.add({
            name: "my_da",
            actionfunction() {
            $.event.trigger('my_da');
            }
        });
    }


Now our toolbar should look like this.




Our next step in customizing the toolbar will be to add a select-list. To do this, we follow the same procedure as before and add another control element which is of type "SELECT". 


    // Add new select-list    
    toolbarGroup.controls.push({
        type: "SELECT",
        title: "Select",
        id: "my_select",
        action: "my_select_action"
    });    


Again, we need to also create a custom action to add values to the Select List and an event to be triggered.


    actions.add({
        name: "my_select_action",
        choices: [{ label: "All Jobs", value: "" },
                  { label: "President", value: "PRESIDE" }, 
                  { label: "Manager", value: "MANAGER" },
                  { label: "Analyst", value: "ANALYST" },
                  { label: "Clerk", value: "CLERK" },
                  { label: "Salesman", value: "SALESMAN" }                  
                 ],
        actionfunction(event, focusElement) {
        var e = document.getElementById("my_ig_ig_toolbar_my_select"),
            value = e.options[e.selectedIndex].value;
            apex.item"P1_JOB" ).setValue(value);
        }
    });


Here we create a list of the jobs and save the value in an item (P1_JOB). Now we can work with this value and, for example, filter our interactive grid. 
For this we create a hidden item which we also call "P1_JOB" and also a new "Change" Dynamic Action for that item. After that, we add a "True" action to refresh the grid. Finally adjust the WHERE clause of the grid and pick P1_JOB to "Page Items to Submit"




Now our toolbar should look like this and we can filter our IG by selecting a value from the Select List.




Finally we are going tol add a menu to the toolbar.

For this, we need a new control element of type "MENU". That is the easy part because we already know how to do it. However, defining the menu items is a little bit harder. Each entry has its own type, action, label and other options that we can define. Note: each additional entry needs a separator first.
In our example, we'll use the "Highlight" and "Download" pre-defined action, plus two other custom actions that will trigger an alert.


    // Add a Menu to the toolbar
    toolbarGroup.controls.push({type: "MENU",
        id: "my-menu",
        label: "My Menu",
        icon: "fa fa-navicon",
        iconBeforeLabel: true,
        hot: false,
        action: "custom-menu",
        // Add Menu Items (each additional entry needs a separator)
        menu: {
            items: [{
                type: "action",
                action: "show-highlight-dialog",
                label: "Highlight"
            }, {
                type: "separator"
            }, {
                type: "action",
                action: "show-download-dialog",
                label: "Download"
            }, {
                type: "separator"
            }, {
                type: "action",
                actionfunction(){ alert('Action 1');},
                label: "Action 1",
                icon: "fa fa-number-1-o"
            }, {
                type: "separator"
            }, {
                type: "action",                
                label: "Action 2",
                actionfunction(){ alert('Action 2');},
                icon: "fa fa-number-2-o"
            }]
        }
    });


So thats it. Your toolbar should now look like this.



The finished JavaScript Code should be the following:


function(config) {
    var $ = apex.jQuery,
    toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),  // Make a copy of the default toolbar
    toolbarGroup = toolbarData.toolbarRemove("search");         // Remove the search menu group
    toolbarGroup = toolbarData.toolbarRemove("reports");        // Remove the reports menu group
    toolbarGroup = toolbarData.toolbarRemove("views");          // Remove the views menu group
    toolbarGroup = toolbarData.toolbarRemove("actions2");       // Remove the actions2 menu group
    toolbarGroup = toolbarData.toolbarRemove("actions3");       // Remove the actions3 menu group
    toolbarGroup = toolbarData.toolbarRemove("actions4");       // Remove the actions4 menu group
    toolbarGroup = toolbarData.toolbarFind("actions1");         // Locate the actions menu group  
    
    // Add new buttons
    // Note the toolbar is action driven, so we just need to define the correct action name with the button.
    toolbarGroup.controls.push({
        type: "BUTTON",
        label: "Add Row(s)",
        action: "selection-add-row",
        icon: "icon-ig-add-row",
        iconBeforeLabel: true,
        hot: true
    });    
    toolbarGroup.controls.push({
        type: "BUTTON",
        label: "Delete Row(s)",
        action: "selection-delete",
        icon: "icon-ig-delete",
        iconBeforeLabel: true,
        hot: true
    });
    toolbarGroup.controls.push({
        type: "BUTTON",
        label: "Save",
        action: "save",
        icon: "icon-ig-save",
        iconBeforeLabel: true,
        hot: true
    });
    toolbarGroup.controls.push({
        type: "BUTTON",
        label: "My Button",
        icon: "fa fa-american-sign-language-interpreting",
        iconBeforeLabel: true,
        hot: true,
        action: "my_action"
    });
    toolbarGroup.controls.push({
        type: "BUTTON",
        label: "My DA Button",
        icon: "fa fa-play",
        iconBeforeLabel: true,
        hot: true,
        action: "my_da"
    });  

    // Add new select-list
    toolbarGroup.controls.push({
        type: "SELECT",
        title: "Select",
        id: "my_select",
        action: "my_select_action"
    }); 

    // Add a Menu to the toolbar
    toolbarGroup.controls.push({type: "MENU",
        id: "my-menu",
        label: "My Menu",
        icon: "fa fa-navicon",
        iconBeforeLabel: true,
        hot: false,
        action: "custom-menu",
        // Add Menu Items (each additional entry needs a separator)
        menu: {
            items: [{
                type: "action",
                action: "show-highlight-dialog",
                label: "Highlight"
            }, {
                type: "separator"
            }, {
                type: "action",
                action: "show-download-dialog",
                label: "Download"
            }, {
                type: "separator"
            }, {
                type: "action",
                actionfunction(){ alert('Action 1');},
                label: "Action 1",
                icon: "fa fa-number-1-o"
            }, {
                type: "separator"
            }, {
                type: "action",                
                label: "Action 2",
                actionfunction(){ alert('Action 2');},
                icon: "fa fa-number-2-o"
            }]
        }
    });

    config.initActions = function(actions){
        actions.add({
            name: "my_action",
            actionfunction() {
            alert('Hello World');
            }
        });
        actions.add({
            name: "my_da",
            actionfunction() {
            $.event.trigger('my_da');
            }
        });
        actions.add({
            name: "my_select_action",
            choices: [{ label: "All Jobs", value: "" },
                      { label: "President", value: "PRESIDE" }, 
                      { label: "Manager", value: "MANAGER" },
                      { label: "Analyst", value: "ANALYST" },
                      { label: "Clerk", value: "CLERK" },
                      { label: "Salesman", value: "SALESMAN" }                  
                     ],
            actionfunction(event, focusElement) {
            var e = document.getElementById("my_ig_ig_toolbar_my_select"),
                value = e.options[e.selectedIndex].value;
                apex.item"P13_JOB" ).setValue(value);
            }
        });
        }; 

    // Assign new toolbar data back to toolbarData configuration property
    config.toolbarData = toolbarData;

    // Return the options
    return config;
}


The following elements can also be added in the same way, but we will not go into that further here: 
  • Static Text
  • Textfield
  • Radio button
  • Toggle switch

These were very basic examples. Try anything you want. Many things are possible and surly will be fun for you :-)


We hope these tips and tricks will help you. 
If you have questions or suggestions, please leave us a comment ;-)


Here is the demo app for reference.


References:
https://docs.oracle.com/en/database/oracle/application-express/20.2/aexjs/grid.html

Labels: , ,

58 Comments:

At March 21, 2021 at 5:23 PM , Blogger Lalit Pandey said...

I want to have delete button in each row and when I click the delete button on particular row then it should delete it if row is not selected. Is it possible?

 
At March 22, 2021 at 12:11 PM , Blogger Timo said...

Hey Lalit,
that is possible, but in a different way.
You need to add a link column that will fire a DA to delete the row.
Now you can either delete the row directly with a click or first save the IDs in a 'hidden item' and then delete them by clicking on another button that executes the delete command.

 
At April 2, 2021 at 7:03 AM , Blogger siva said...

Can you please attach this version of the application here or can you please email to jmax70892@gmail.com

 
At August 12, 2021 at 7:59 AM , Blogger Tommy said...

how can i change the text of the toolbar search: search all text columns?

 
At August 19, 2021 at 9:38 AM , Blogger Timo said...

Hey Tommy,
you can use the follwing JS Code (Execute when Page Load):

apex.region("my_ig").call("getToolbar").toolbar("findElement", "search_field").attr("placeholder","Something you want...");

"my_ig" is the static-id of the ig ;-)

 
At September 2, 2021 at 4:59 PM , Blogger Mathieu said...

Hi Timo,

There is another way to combine page items and the toolbar of an Interactive grid.
Just move the toolbar behind the page item and some extra spacing between the page item and the "select columns" button of the toolbar.

For example:
$(".a-Toolbar-group--together").prepend($("#P1_MY_PAGE_ITEM"));
+
#P1_MY_PAGE_ITEM{
margin-right: 16px;
}

 
At February 27, 2022 at 11:34 PM , Blogger FuRbY said...

Hi, I'm not sure how to configure the dynamic action to be executed by the custom action of the new button
Could you help me?

$.event.trigger('my_da');

but what's the DA Event?

Thanks

 
At April 25, 2022 at 10:19 PM , Blogger jvmoore13 said...

Is it possible to get a backup of the demo app? I'd like to see the back end as well. You can email me at jvmoore0613@gmail.com.

 
At April 26, 2022 at 11:32 PM , Anonymous Anonymous said...

Hola si yo quisiera ejecutar un procedimiento almacenado en la base de datos desde un boton, como lo agrego al codigo, o como configuro la accion de la funcion para que lo ejecute

 
At May 8, 2022 at 7:43 AM , Anonymous Anonymous said...

Is it possible to have a submit page action button in interactive grid?

 
At August 24, 2022 at 4:08 PM , Anonymous Anonymous said...

In the Dynamic Event Please specify as Custom and
Custom Event :"my_da"
Selection Type: javascript
Javascript Expression:
document

 
At December 28, 2022 at 4:40 PM , Anonymous Anonymous said...

военный адвокат Запорожье по мобилизации

 
At December 29, 2022 at 2:23 PM , Anonymous Anonymous said...

Продукция одноразовые бритвы gillette купить оптом, это отличный способ начать свое дело. Постоянные акции на съемные кассеты gillette fusion proglide. Средства для бритья лезвие fusion практичные наборы gillette купить оптом по оптимальной цене производителя. Не упустите возможность приобрести лезвия gillette mach3, станки для бритья джиллет фьюжен повер, а также любой другой продукт серии gillette mach 3 по оптимальной стоимости!. Хит продаж одноразовые бритвенные станки gillette 2.

 
At December 30, 2022 at 9:38 AM , Anonymous Anonymous said...

https://www.dom-haus.ru/2022/12/topeu.com-otzyvy-realnykh-klientov-obzor-brokera-topeu.html

 
At December 30, 2022 at 1:21 PM , Anonymous Anonymous said...

My blog

 
At December 30, 2022 at 2:31 PM , Anonymous Anonymous said...

zobacz moja strona www

 
At December 30, 2022 at 6:49 PM , Anonymous Anonymous said...

wejdź i sprawdź to materia jakie mnie ciekawi

 
At December 30, 2022 at 7:48 PM , Anonymous Anonymous said...

zobacz tu My site

 
At January 2, 2023 at 12:43 PM , Anonymous Anonymous said...

коробка дверная деревянная купить томск

 
At January 3, 2023 at 8:23 PM , Anonymous Anonymous said...

klik ociupinę ode mnie

 
At January 7, 2023 at 11:33 PM , Anonymous Anonymous said...

Remonty to przedmiot jakie mnie niepokoi

 
At January 10, 2023 at 12:17 AM , Anonymous Anonymous said...

wejdź tutaj najfajniejsza strona w temacie usługi remontowe warszawa

 
At January 10, 2023 at 1:56 AM , Anonymous Anonymous said...

po co usługi remontowe My site

 
At January 10, 2023 at 4:17 AM , Anonymous Anonymous said...

kliknij wspiera

 
At January 10, 2023 at 4:41 PM , Anonymous Anonymous said...

usługi remontowe w Warszawie to kwestia jakie mnie interesuje

 
At January 10, 2023 at 10:16 PM , Anonymous Anonymous said...

sprawdź i wejdź wspiera

 
At January 10, 2023 at 10:34 PM , Anonymous Anonymous said...

sprawdź tu to idea które mnie niepokoi

 
At January 11, 2023 at 11:24 AM , Anonymous Anonymous said...

po co Firmy remontowo wykończeniowe najfajniejsza strona w temacie usługi remontowe warszawa

 
At January 11, 2023 at 2:17 PM , Anonymous Anonymous said...

usługi remontowe warszawa po co usługa remontowa to kwestia jaka mnie ciekawi

 
At January 11, 2023 at 9:04 PM , Anonymous Anonymous said...

usługi remontowe warszawa klik to temat jaki mnie nurtuje

 
At January 12, 2023 at 3:23 AM , Anonymous Anonymous said...

dlaczego usługa remontowa My site

 
At January 12, 2023 at 6:29 AM , Anonymous Anonymous said...

dlaczego usługa remontowa nieco ode mnie

 
At January 12, 2023 at 11:37 AM , Anonymous Anonymous said...

url super strona w temacie usługi remontowe warszawa

 
At January 12, 2023 at 3:39 PM , Anonymous Anonymous said...

usługi remontowe warszawa Remont mieszkania Warszawa to kwestia która mnie niepokoi

 
At January 12, 2023 at 8:42 PM , Anonymous Anonymous said...

sprawdź to myśl jakie mnie frapuje

 
At January 14, 2023 at 4:33 AM , Anonymous Anonymous said...

remonty mieszkań warszawa kliknij tutaj to kwestia która mnie nurtuje

 
At January 14, 2023 at 3:20 PM , Anonymous Anonymous said...

remonty mieszkań warszawa remontowanie mieszkań Warszawa to sprawa jaka mnie ciekawi

 
At January 15, 2023 at 5:54 PM , Anonymous Anonymous said...

zobacz tu to przedmiot jakie mnie nurtuje

 
At January 15, 2023 at 6:49 PM , Anonymous Anonymous said...

kliknij super strona w temacie wykończenia wnętrz warszawa

 
At January 15, 2023 at 8:39 PM , Anonymous Anonymous said...

wejdź to rzecz jakie mnie ciekawi

 
At January 16, 2023 at 6:44 AM , Anonymous Anonymous said...

wykończenia wnętrz warszawa klik to przedmiot który mnie ciekawi

 
At January 16, 2023 at 6:55 AM , Anonymous Anonymous said...

wykończenia wnętrz warszawa kliknij tutaj to zagadnienie jakie mnie niepokoi

 
At January 16, 2023 at 9:41 AM , Anonymous Anonymous said...

wykończenia wnętrz warszawa tutaj zobacz to sprawa która mnie intryguje

 
At January 17, 2023 at 1:36 PM , Anonymous Anonymous said...

ANON

 
At January 18, 2023 at 2:57 PM , Anonymous Anonymous said...

remonty mieszkań pod klucz warszawa sprawdź to materia jaka mnie nurtuje

 
At January 18, 2023 at 4:10 PM , Anonymous Anonymous said...

klik najlepsza strona w temacie remonty mieszkań pod klucz warszawa

 
At January 18, 2023 at 4:38 PM , Anonymous Anonymous said...

remonty mieszkań pod klucz warszawa remonty mieszkania pod klucz w Warszawie to sprawa która mnie ciekawi

 
At January 18, 2023 at 5:48 PM , Anonymous Anonymous said...

klik najlepsza strona www o remonty mieszkań pod klucz warszawa

 
At January 18, 2023 at 6:13 PM , Anonymous Anonymous said...

klik tutaj to temat które mnie frapuje

 
At January 18, 2023 at 7:57 PM , Anonymous Anonymous said...

zobacz to idea które mnie interesuje

 
At January 18, 2023 at 8:23 PM , Anonymous Anonymous said...

sprawdź najlepsza strona na temat remonty mieszkań pod klucz warszawa

 
At January 20, 2023 at 12:52 AM , Anonymous Anonymous said...

remonty super strona internetowa na temat remonty mieszkań warszawa

 
At January 20, 2023 at 1:14 AM , Anonymous Anonymous said...

remonty mieszkań warszawa sprawdź to przedmiot który mnie intryguje

 
At January 20, 2023 at 8:15 AM , Anonymous Anonymous said...

pomoc w remontach mieszkań Warszawa najfajniejsza strona www na temat remonty mieszkań warszawa

 
At January 24, 2023 at 6:44 AM , Anonymous Anonymous said...

порода Девон-рекс короткошерстная порода котов, пришедшая к нам из Англии. Они имеют человеколюбивым, приятным характером и не меньше притягательной внешний обликом. описание породы девон-рекс говорит, что средний вес животных равняется от 2,5 кг до 4,5 кг. Кот девон-рекс обычно мощнее и увесистее, чем кошка.

 
At January 26, 2023 at 9:52 AM , Anonymous Anonymous said...

They call the author Tijuana and her hubby does not like it at all. One of the absolute best things in the world for her is fencing however she's thinking on starting something new. American Samoa has constantly been my living location and my household likes it. Administering databases is his profession. My spouse and I keep a website. You might wish to examine it out here: download games for free for pc

 
At January 28, 2023 at 8:54 AM , Anonymous Anonymous said...

The author's name is Esta Knapp and she absolutely digs that name. I am a messenger. To fix puzzles is something he truly enjoys doing. Pennsylvania is his birth place. See what's new on his site here: kbh games fnf

 
At January 30, 2023 at 12:43 PM , Anonymous Anonymous said...

They call me Providencia however I never ever actually liked that name. Flower arranging is what her household and her delight in. Arkansas is where our home is. Accounting has actually been his day job for a while. Take a look at his website here: dragon city mod

 

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to Post Comments [Atom]

<< Home