Forum Stats

  • 3,872,118 Users
  • 2,266,382 Discussions
  • 7,911,052 Comments

Discussions

Image button interactive grid

RobV62
RobV62 Member Posts: 52 Bronze Badge
edited Jan 4, 2019 3:04AM in APEX Discussions

Hello,

Is there a possibility to use a static image for the label for a custom interactive grid button. I have tried to upload an image as a static file and use the label property to set the label content to this file. This works for "normal" buttons on the page but not for custom buttons on the IG.

I have tried to use this syntax for the label property: <img src="#APP_IMAGES#duitse vlag.png" />.

pastedImage_0.png

Thanks in advance

Mahmoud_Rabie

Best Answer

  • John Snyders-Oracle
    John Snyders-Oracle Member Posts: 1,436 Employee
    edited Jan 2, 2019 12:10PM Answer ✓

    Hi,

    The toolbar widget that IG uses does not allow markup for the button label. One problem with the solution given by Nivetha besides the extra complexity of the DA is that if for whatever reason the IG decides to refresh the toolbar the change will be gone. It also relies on knowledge of how the toolbar generates element ids, which could change.

    For many release now APEX has used CSS for icons in buttons and elsewhere. We generally prefer font based icons but CSS images or sprite images can also be used. It is just a matter of defining the right CSS background rule.

    When you define a IG toolbar button you can set the button icon and make it icon only like so:

    createButton = {

        type: "BUTTON",

        action: "create-employee",

        iconOnly: true,

        icon: "customButtonIcon"

    };

    The button title (for tooltip) comes from the action definition label unless action title is given.

    Then you need to add a CSS rule for the button image. For example I added this to the page inline CSS.

    .customButtonIcon {

        background-image: url(#IMAGE_PREFIX#app_ui/img/icons/apex-edit-pencil.png);

        background-size: 16px 16px;

    }

    Regards,

    -John

    Mahmoud_Rabie

Answers

  • Nivetha Ramnath
    Nivetha Ramnath Member Posts: 63
    edited Jan 2, 2019 5:05AM

    Hi,

    Please give an ID to your button in your custom IG toolbar button java script.

       createButton = {

                type: "BUTTON",

                hot: true,

                action: "create-employee",

                id: "TEST" //give your own ID

            };

    Also give an static ID to your IG in Region - Advanced- Static ID (ex: EMP)

    Add the below query in your DA on page load or Execute on page load:

    var b = "<img src='#APP_IMAGES#duitse vlag.png' height='38' width='100'>";

    $("#EMP_ig_toolbar_TEST").html(b); // check your button ID by inspecting your button.

    Regards,

    Nivetha Ramnath

  • John Snyders-Oracle
    John Snyders-Oracle Member Posts: 1,436 Employee
    edited Jan 2, 2019 12:10PM Answer ✓

    Hi,

    The toolbar widget that IG uses does not allow markup for the button label. One problem with the solution given by Nivetha besides the extra complexity of the DA is that if for whatever reason the IG decides to refresh the toolbar the change will be gone. It also relies on knowledge of how the toolbar generates element ids, which could change.

    For many release now APEX has used CSS for icons in buttons and elsewhere. We generally prefer font based icons but CSS images or sprite images can also be used. It is just a matter of defining the right CSS background rule.

    When you define a IG toolbar button you can set the button icon and make it icon only like so:

    createButton = {

        type: "BUTTON",

        action: "create-employee",

        iconOnly: true,

        icon: "customButtonIcon"

    };

    The button title (for tooltip) comes from the action definition label unless action title is given.

    Then you need to add a CSS rule for the button image. For example I added this to the page inline CSS.

    .customButtonIcon {

        background-image: url(#IMAGE_PREFIX#app_ui/img/icons/apex-edit-pencil.png);

        background-size: 16px 16px;

    }

    Regards,

    -John

    Mahmoud_Rabie
  • RobV62
    RobV62 Member Posts: 52 Bronze Badge
    edited Jan 4, 2019 3:04AM

    Thanks John, the solution works fine!