Interactive Grids button’s customization

One of the features I always hated in the previous versions of APEX (before 5) were tabular forms. I never got then, they were always behaving funky, it was hard to debug and I preferred to write dynamic tabular forms by myself then with the built in functionality. It changed with the release of Interactive Grids with the Oracle APEX version 5.

When I’ve started working with them it was in the English speaking company and I didn’t face the problem I had later in Czech company, where I wanted to customize or translate buttons. It was not difficult to understand words like “edit” or “save” for users, but I wanted to have consistency in these buttons across the whole application.

The first button I wanted to change was “add new row”. Luckily to change this label it’s pretty straightforward as it has its own setting in the Interactive Grid Attributes – Toolbar menu, as shown on the picture below.

Sadly this is the extent of the customization you have about the buttons. If you want to add icon, change the button to “hot” or change the names of the other buttons, you simply have to dive into the Interactive Grid JavaScript model. I’ll maybe dig more into details later, but for now, I’ll just show you the pieces, which are related to the topic today. There are few settings you can adjust for each button.

button.iconOnly = true / false;
button.hot = true / false;
button.label = "label"
button.title = "tooltip"
button.iconBeforeLabel = true / false;

I believe all the settings are self explanatory. The only thing which remains, is how to use this in the real example. If you have a look into attributes of Interactive Grid region, you can see, it has field for something called JavaScript Initialization Code (in advanced section of attributes). There you can adjust the configuration of the Interactive Grid region. First we copy the default toolbar, get all the buttons we want to edit and setup their properties, like icons, labels and icon position as shown below. Lastly you save the configuration of your toolbar into the configuration of your Interactive Grid and return the config to be processed.

function(config) {
    let $             = apex.jQuery,
        toolbarData   = $.apex.interactiveGrid.copyDefaultToolbar(),
        addrowAction  = toolbarData.toolbarFind("selection-add-row"),
        saveAction    = toolbarData.toolbarFind("save"),
        editAction    = toolbarData.toolbarFind("edit");
     
    addrowAction.icon = "icon-ig-add-row";
    addrowAction.iconBeforeLabel = true;
    addrowAction.hot = true;
    saveAction.label = "Uložit změny";
    saveAction.iconBeforeLabel = true;
    saveAction.icon ="icon-ig-save-as";
    saveAction.hot = true;
    editAction.label = "Editovat";

    config.toolbarData = toolbarData;
    return config;
}

After applying the settings and refreshing the page, you can see the results of your labor.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *