how i can change the wizard container image (icon) oracle apex?

Question

I have wizard container based a dynamic list in Oracle apex, now I want to show an image for each list entry, either a custom image or an image from static file. How I can do that, or change the image only for current status?

  SELECT
    NULL,
 (SELECT D.LOOKUP_E_VALUE
FROM CRM_LOOKUP_DETAILS D
 WHERE D.ID=G.STATUS),
 NULL TARGET,
 CASE WHEN G.STATUS IN (
                SELECT R.STATUS FROM CRM_REGISTRY R
                 WHERE R.ID=:REGESTRY_ID 
 ) THEN
 'YES' 
   else
 'NO'END AS is_current_list_entry
FROM CRM_STATUS_LOG G
 WHERE G.REGISTRY_ID =:REGESTRY_ID
  ORDER BY G.DESIPLAY_ORDER ;

Dan McGhan Dan McGhan · Accepted Answer · 2020-03-06T20:28:12

Here are a couple of things to consider:

Item images and state: There are three states that have to be considered for each item in the list. The wizard progress list template will give the current list item a class named 'is-active'. Then, when the page loads, items that are to the left of the current item are given a class named 'is-complete'. So, if an item doesn't have either of the the 'is-active' or 'is-complete' classes, then you can assume its something like 'is-pending', though that's the default so a class isn't assigned.

If you want to assign a custom image, you'll need to consider how you want to handle the different states. You might, for example, create three different images for each item and then swap them in as needed.
Image size: the default size of the default icons is 16px. They are scaled up in size using the CSS transform property. This works well for icons but not for images. You'll probably want to size the images as you want them ahead of time.

I'll show you how to customize step two in the following wizard progress list in APEX 19.2. I'll use 32px square for the 'is-active' image, 24px for 'is-complete' (I've also added some green to this image), and 16px for pending items.

Upload the images to the Shared Components and get the URLs from the Reference column in the report. You can use either Static Application Files or Static Workspace Files depending on your needs. I used Static Application Files and the URLs are: #APP_IMAGES#wizard-dm-pending.jpg, #APP_IMAGES#wizard-dm-active.jpg, and #APP_IMAGES#wizard-dm-complete.jpg.

Add the following CSS to the Inline page attribute (CSS section) of the pending pages (pages before the active/current page).

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker {
    -webkit-transform: unset;
    transform: unset;
    background: none;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
}

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker:before {
    content: url(#APP_IMAGES#wizard-dm-pending.jpg);
}

Most of the CSS is clearing values that would otherwise be set. Then some adjustments are made for the image size and the correct image is added. Step two then looks like:

Add the following CSS to the Inline page attribute (CSS section) of the current/active page.

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker {
    -webkit-transform: unset;
    transform: unset;
    background: none;
    padding: 0;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
}

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker:before {
    content: url(#APP_IMAGES#wizard-dm-active.jpg);
}

Step two then looks like:

Add the following CSS to the Inline page attribute (CSS section) of the complete pages (pages after the active/current page).

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker {
    -webkit-transform: unset;
    transform: unset;
    background: none;
    padding: 0;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    margin-top: -12px;
}

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker:before {
    content: url(#APP_IMAGES#wizard-dm-complete.jpg);
}

Step two then looks like (I made the image green prior to uploading it):

You can repeat this process for each image in the list. As you can imagine, the more images, the more tedious this will become. And making a change would be tedious as well.

how i can change the wizard container image (icon) oracle apex?

1 Answers