Skip to Main Content
Feature Request FR-3142
Product Area User Interface
Status DELIVERED

9 Voters

Custom templates for Select Lists

andrea galizzi Public
· May 12 2023

Idea Summary
Custom HTML templates for Popup LOVs, possibly with Template Directives and Template Components support.

Example:

This has been delivered in Oracle APEX 24.1!

Comments

Comments

  • andrea galizzi OP 2.1 years ago

    Partial workaround

    Now you can use a custom template by adding the following code in the "Initialization JavaScript Function" attribute on every page item that use a specific LOV.

    function(options) {
    options.display = "list";
    options.recordTemplate = (
    '<li data-id="&' + 'DRIVER_ID' + '." class="u-flex u-align-items-center u-justify-content-stretch">'
      + '<span class="fa fa-user t-Avatar t-Avatar--initials t-Avatar--sm u-color margin-right-sm"></span>'
      + '<div class="u-flex-grow-1">'
       + '&' + 'DRIVER_NAME' + '.'
       + '<div class="detail">'
        + '<span class="t-Badge-icon fa fa-shield u-pullLeft margin-right-sm" aria-hidden="true"></span>'
        + '&' + 'TEAM_NAME' + '.'
       + '</div>'
      + '</div>'
      + '<div class="margin-left-sm">'
       + '<span class="t-Badge t-Badge--success t-Badge--subtle  " role="status" aria-label="Role Admin" title="Role Admin">'
        + '<span class="t-Badge-icon fa fa-hashtag" aria-hidden="true"></span>'
        + '<span class="t-Badge-value">&' + 'DRIVER_NUMBER' + '.</span>'
       + '</span>'
      + '</div>'
     + '</li>'
    );
    return options;
    }
    

    As you can see, this solution isn't exactly ideal because uses a strange syntax to map the columns and because the code has to be repeated in each item.

    The ideal would be to be able to define the template directly in the shared components of the app, in the properties of the list.