Как я могу изменить изображение контейнера мастера (значок) oracle Apex?

Question

У меня есть контейнер-мастер на основе динамического c списка в Oracle apex , теперь я хочу показать изображение для каждой записи списка, либо пользовательское изображение, либо изображение из stati c файл. Как я могу это сделать или изменить изображение только для текущего статуса?

  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 ;

Answer 1

Вот несколько моментов, которые следует учитывать:

1. Изображения и состояние элемента: для каждого элемента в списке необходимо учитывать три состояния. Шаблон списка хода выполнения мастера присвоит текущему элементу списка класс с именем «is-active». Затем, когда страница загружается, элементам, находящимся слева от текущего элемента, присваивается класс с именем «is-complete». Таким образом, если у элемента нет ни одного из классов «is-active» или «is-complete», вы можете предположить, что он имеет что-то вроде «is-pending», хотя это значение по умолчанию, поэтому класс не назначен .

   Если вы хотите назначить собственное изображение, вам нужно подумать о том, как вы хотите обрабатывать различные состояния. Например, вы можете создать три разных изображения для каждого элемента, а затем поменять их при необходимости.

2. Размер изображения: размер значков по умолчанию по умолчанию составляет 16 пикселей. Они масштабируются с использованием свойства преобразования CSS. Это хорошо работает для иконок, но не для изображений. Возможно, вы захотите изменить размер изображений так, как вы хотите, чтобы они были заблаговременно.

Я покажу вам, как настроить второй шаг в следующем списке прогресса мастера в APEX 19.2. Я буду использовать квадрат размером 32 пикселя для изображения «is-active», 24 пикселя для «is-complete» (я также добавил немного зеленого цвета к этому изображению) и 16 пикселей для ожидающих элементов.

1. Загрузите изображения в общие компоненты и получите URL-адреса из столбца Reference в отчете. Вы можете использовать либо файлы приложений Stati c, либо файлы рабочей области Stati c в зависимости от ваших потребностей. Я использовал Stati c Файлы приложений и URL-адреса: # APP_IMAGES # wizard-dm-pending.jpg , # APP_IMAGES # wizard-dm-active.jpg и # APP_IMAGES # wizard-dm-complete.jpg .

2. Добавьте следующий CSS к атрибуту страницы Inline (раздел CSS) ожидающего решения страницы (страницы перед активной / текущей страницей).

   .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);
   }
   

   Большая часть CSS - это очистка значений, которые в противном случае были бы установлены. Затем делаются некоторые корректировки для размера изображения и добавляется правильное изображение. Второй шаг выглядит следующим образом:

   

3. Добавьте следующий CSS к атрибуту страницы Inline (CSS раздел) текущей / активной страницы.

   .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);
   }
   

   Затем выполняется второй шаг:

   

4. Добавьте следующий CSS к атрибуту страницы Inline (раздел CSS) полных страниц (страниц после активной / текущей страницы).

   .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);
   }
   

   Шаг второй выглядит следующим образом (я сделал изображение зеленым перед его загрузкой):

   

Вы можете повторить этот процесс для каждого изображения в списке. Как вы можете себе представить, чем больше изображений, тем более утомительным это станет. И вносить изменения тоже было бы утомительно.