Forum Stats

  • 3,872,109 Users
  • 2,266,380 Discussions
  • 7,911,050 Comments

Discussions

How to add select list item in search bar of IG

Soukaina IDRISSI
Soukaina IDRISSI Member Posts: 896 Bronze Badge
edited Jan 18, 2019 12:07PM in APEX Discussions

Hi Experts,

Im using APEX5.1, and i want to custom a search bar of IG, by adding a select list on the top right.

Thank you for help.

Rodrigo Mesquita

Answers

  • Franck N
    Franck N Member Posts: 1,019 Silver Trophy
    edited Jan 3, 2019 7:32AM

    Hi,

    create your select list Item for example : P8_EMP_IG

    give an ID to your IG for example : IG__ID

    add this code on execute when page load:

    $("#P8_EMP_IG").appendTo("#IG__ID_ig_toolbar");

    and finally  add this css in the inline of your page:

    #P8_EMP_IG{

    margin-left: 5px;

    min-height: 3.2rem !important;

    }

    rest you can adjust it accordingly.

    demo

    regards,

    Franck

  • John Snyders-Oracle
    John Snyders-Oracle Member Posts: 1,436 Employee
    edited Jan 3, 2019 9:42AM

    Hi,

    What Franck proposed will work and has the advantage that if the select item is already something that is in page items to submit for the IG then there is nothing more to do than refresh the IG region. But as I pointed out yesterday Image button interactive grid making assumptions about how APEX components generate internal element IDs could break in the future. So the "_ig_toolbar" suffix could change or be removed altogether. The IG region could also refresh the toolbar at any time (it used to do this but in more recent releases I don't think it does) and this would lose any DOM modifications. A minor disadvantage is that when you put an item on the page a lot of markup gets generated by the engine like label and a place holder for error messages etc. If you move just the select element then you leave a bunch of useless stuff behind that you probably want to hide.

    The toolbar widget is not documented and therefore unsupported at this time (we hope to document it in the future). Aspects of the API have already been shown including in the Sample Interactive Grids app. The toolbar supports select lists as can be seen when there are saved reports. The following code in the IG Advanced: JavaScript Init Code gives an example of adding a select list. The key thing is that rather than responding to a select list change with a DA you put the action code in the set method.

    function(config) {

        var $ = apex.jQuery,

            toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),

        toolbarData.toolbarFind("actions2").controls.push({

            type: "SELECT",

            action: "change-size"

        });

        config.toolbarData = toolbarData;

       

        config.initActions = function(actions) {

            var ig$ = $(actions.context);

            actions.add({

                name: "change-size",

                label: "Change Size",

                choices: [{label: "Small", value: "S"},{label: "Medium", value: "M"},{label: "Large", value: "L"}],

                set: function(v) {

                    this.value = v;

                    console.log("do something with ", v);

                    // example: $s("some hidden page item", v);

                    // ig$.interactiveGrid("refresh");

                },

                get: function() {

                    return this.value;

                },

                value: "S"

            });

        };

        return config;

    }

    You don't say what values the select list contains or what you will do when the value changes. I assume something related to the IG region. The advantage of using the toolbar API and actions is that it is the natural way that the toolbar works. Note there is no need for special CSS rules. The down side is that if you need the value in a page item to be sent to the server then you need to set a hidden item. Also getting the list of values from the server can require more work if it is not a fixed set as shown in the simple example above.

    Regards,

    -John

    Rodrigo Mesquita
  • Franck N
    Franck N Member Posts: 1,019 Silver Trophy
    edited Jan 3, 2019 9:52AM

    Indeed,

    i agree this might be the best way to solve the case.

    regards,

    Franck

  • Soukaina IDRISSI
    Soukaina IDRISSI Member Posts: 896 Bronze Badge
    edited Jan 16, 2019 10:13AM

    Thank you Franck and John for reply.

    @John Snyders-Oracle for your explanations, but here by applying your code in:

    IG -> Attributes -> Advanced -> JavaScript Code
    I get blank region

  • John Snyders-Oracle
    John Snyders-Oracle Member Posts: 1,436 Employee
    edited Jan 17, 2019 8:31AM

    There is likely a JavaScript error in the console that will point you to the error.

  • Soukaina IDRISSI
    Soukaina IDRISSI Member Posts: 896 Bronze Badge
    edited Jan 18, 2019 4:49AM

    Hi John,

    My current result is:

    res_actuel_ig.png

    My expected result is:

    res_attendu_ig.png

    I did demo of issue, you can see demo on apex.oracle.com with this credentials:

    Workspace: ws_formation

    Username: asoukaina

    Password: [email protected]

    I used the Application 83856 - Custom_IG(83856:1)

    NB: My Apex Version: 5.1

    Thank you.

  • John Snyders-Oracle
    John Snyders-Oracle Member Posts: 1,436 Employee
    edited Jan 18, 2019 12:07PM

    Hi,

    I just tried the app and it doesn't even work or look like the picture. I get an error as soon as the page loads. It looks like you moved the Advanced JavaScript code into a dynamic action. One that will never fire.

    Perhaps that is the confusion. Not knowing where to put the sample code that I provided. I said that it goes "in the IG Advanced: JavaScript Init Code" attribute. Click on the Attributes node under the IG region in the rendering tree. Then scroll down in the property editor and you will find this attribute in the Advanced section.

    Also you didn't change the code. Do you really want a select list with small, medium, large? You never said what you are trying to do.

    The second picture seems completely unrelated but I can't tell what the question is. You should start a new thread for that.

    Regards,
    -John