12 Replies Latest reply on Jun 10, 2018 12:32 PM by fac586

    Dynamic List - Media list template

    partlycloudy

      See https://apex.oracle.com/pls/apex/f?p=134181:19

       

      The list region uses a Dynamic list with the following query and the Media List template for display with the Show Badges template option enabled.

       

      select
        level lvl,
       'link' link,
       'text' text,
       'a01' a01,
       'a02' a02,
       'a03' a03,
       'a04' a04,
       'a05' a05,
       'a06' a06
      from dual
      connect by level <= 10
      

       

      The (default) list template is

       

      <li class="t-MediaList-item is-active #A04#">

          <a href="#LINK#" class="t-MediaList-itemWrap #A05#" #A03#>

              <div class="t-MediaList-iconWrap">

                  <span class="t-MediaList-icon u-color #A06#"><span class="t-Icon #ICON_CSS_CLASSES# u-color #A06#" #IMAGE_ATTR#></span></span>

              </div>

              <div class="t-MediaList-body">

                  <h3 class="t-MediaList-title">#TEXT#</h3>

                  <p class="t-MediaList-desc">#A01#</p>

              </div>

              <div class="t-MediaList-badgeWrap">

                  <span class="t-MediaList-badge">#A02#</span>

              </div>

          </a>

      </li>

       

      Several things don't make sense to me

       

      1. Why does the list show only 1 row from the query?
      2. Why doesn't the rendered output match the template? e.g. #TEXT# and #A01# are the visible elements but the page shows link and a05 which are HTML tag attributes
      3. Line 11 of the template says to display #A02# as but #A06# is displayed instead

       

      I am trying to implement the Variation A pattern demonstrated here but that uses a Static list so I can't follow along. That shouldn't matter really as long as the SQL query produces the output with the column names the template is looking for, right?

       

      What am I missing here?

       

      Thanks

        • 1. Re: Dynamic List - Media list template
          fac586

          partlycloudy wrote:

           

          See https://apex.oracle.com/pls/apex/f?p=134181:19

           

          The list region uses a Dynamic list with the following query and the Media List template for display with the Show Badges template option enabled.

          select
          levellvl,
          'link'link,
          'text'text,
          'a01'a01,
          'a02'a02,
          'a03'a03,
          'a04'a04,
          'a05'a05,
          'a06'a06
          fromdual
          connectbylevel<=10
          

          The (default) list template is

           

          <li class="t-MediaList-item is-active #A04#">

          <a href="#LINK#" class="t-MediaList-itemWrap #A05#" #A03#>

          <div class="t-MediaList-iconWrap">

          <span class="t-MediaList-icon u-color #A06#"><span class="t-Icon #ICON_CSS_CLASSES# u-color #A06#" #IMAGE_ATTR#></span></span>

          </div>

          <div class="t-MediaList-body">

          <h3 class="t-MediaList-title">#TEXT#</h3>

          <p class="t-MediaList-desc">#A01#</p>

          </div>

          <div class="t-MediaList-badgeWrap">

          <span class="t-MediaList-badge">#A02#</span>

          </div>

          </a>

          </li>

           

          Several things don't make sense to me

           

          1. Why does the list show only 1 row from the query?
          2. Why doesn't the rendered output match the template? e.g. #TEXT# and #A01# are the visible elements but the page shows link and a05 which are HTML tag attributes
          3. Line 11 of the template says to display #A02# as but #A06# is displayed instead

           

          I am trying to implement the Variation A pattern demonstrated here but that uses a Static list so I can't follow along. That shouldn't matter really as long as the SQL query produces the output with the column names the template is looking for, right?

           

          What am I missing here?

           

          1. Might be due to returning multiple levels for what is a linear list. Specify the level parameter as 1 or null.

           

          2 & 3. Dynamic list substitution is by column position, not name. All of the columns up to the last one relevant to the template and data set used must be included in the query. You need to return null placeholder columns for is_current_list_entry, image, image_attribute, and image_alt_attribute.

           

          The label and target columns are also transposed.

           

          SELECT

            level,

            labelValue label,

            [targetValue] target,

            [is_current] is_current_list_entry,

            [imageValue] image,

            [imageAttributeValue] image_attribute,

            [imageAltValue] image_alt_attribute,

            [attribute1] attribute1,

            [attribute2] attribute2,

            [attribute3] attribute3,

            [attribute4] attribute4,

            [attribute5] attribute5,

            [attribute6] attribute6,

            [attribute7] attribute7,

            [attribute8] attribute8,

            [attribute9] attribute9,

            [attribute10] attribute10

          FROM ...

          WHERE ...

          ORDER BY ...

           

          Requires a query like:

           

          select  
              null    lvl,  
              'text'  text,  
              'link'  link,  
              null    is_current_list_entry,
              null    image,
              null    image_attribute,
              null    image_alt_attribute,
              'a01'   a01,  
              'a02'   a02,  
              'a03'   a03,  
              'a04'   a04,  
              'a05'   a05,  
              'a06'   a06  
          from
              dual  
          connect by
              level <= 10  
          
          • 2. Re: Dynamic List - Media list template
            partlycloudy

            Dynamic link substitution is by position, not name

             

            Huh, really?! So the template looks at say #A03#  and grabs the 10th column by position from the query output instead of simply the column named A03?! That's mighty weird, never realized that!

             

            OK so I changed the query and it answers my questions 2 and 3 but what about #1?! Why does it only show one row from the query output?

            • 3. Re: Dynamic List - Media list template
              fac586

              partlycloudy wrote:

               

              Dynamic link substitution is by position, not name

               

              Huh, really?! So the template looks at say #A03# and grabs the 10th column by position from the query output instead of simply the column named A03?! That's mighty weird, never realized that!

               

              OK so I changed the query and it answers my questions 2 and 3 but what about #1?! Why does it only show one row from the query output?

              I suspect this is due to the query returning multiple levels for what is a linear list. Specify all of the level parameters as 1 or null (I always use the latter for non-hierarchical lists). The Media List template has no mark-up in the List Template ... with Sublist Items definitions, and I would reason that this empty content is what is being rendered for every row level metadata indicating that it contains a sublist.

              • 4. Re: Dynamic List - Media list template
                partlycloudy

                Good catch, wow, I guess I have never really explored dynamic list/templates. My example page now shows all 10 rows returned from the query.

                 

                <span class="t-MediaList-icon u-color #A06#"><span class="t-Icon #ICON_CSS_CLASSES# u-color #A06#" #IMAGE_ATTR#></span></span>

                 

                Next question: I changed A06 to fa fa-cloud but the template markup seems to duplicate the icon span so I get 2 clouds (I can't have that given my new username). Any idea what the intended usage of the markup/template is?

                • 5. Re: Dynamic List - Media list template
                  fac586

                  fac586 wrote:

                   

                  partlycloudy wrote:

                   

                  Dynamic link substitution is by position, not name

                   

                  Huh, really?! So the template looks at say #A03# and grabs the 10th column by position from the query output instead of simply the column named A03?! That's mighty weird, never realized that!

                   

                  OK so I changed the query and it answers my questions 2 and 3 but what about #1?! Why does it only show one row from the query output?

                  I suspect this is due to the query returning multiple levels for what is a linear list. Specify all of the level parameters as 1 or null (I always use the latter for non-hierarchical lists). The Media List template has no mark-up in the List Template ... with Sublist Items definitions, and I would reason that this empty content is what is being rendered for every row level metadata indicating that it contains a sublist.

                  Not quite right. Testing shows that it is row 1 that is being displayed using the List Template Noncurrent template definition. The other rows are not appearing because they are all descendents of this node and the template does not contain the #SUB_LISTS# substitution string...

                  • 6. Re: Dynamic List - Media list template
                    fac586

                    partlycloudy wrote:

                     

                    Good catch, wow, I guess I have never really explored dynamic list/templates. My example page now shows all 10 rows returned from the query.

                     

                    <span class="t-MediaList-icon u-color #A06#"><span class="t-Icon #ICON_CSS_CLASSES# u-color #A06#" #IMAGE_ATTR#></span></span>

                     

                    Next question: I changed A06 to fa fa-cloud but the template markup seems to duplicate the icon span so I get 2 clouds (I can't have that given my new username). Any idea what the intended usage of the markup/template is?

                    Use the image column to specify the icon classes. The optional attribute values are described in the List Template Customization tab on the UT sample app:

                     

                    • #A01# : The description of the media list item
                    • #A02# : The badge of the media list item
                    • #A03# : HTML Attributes for the clickable link inside of the list item
                    • #A04# : HTML Attributes for the list item
                    • #A05# : Class attribute for the link element
                    • #A06# : Color class
                    • 7. Re: Dynamic List - Media list template
                      partlycloudy

                      Minor nit...my example page looks flawless in Firefox but in IE 11, the badge is (vertically) elongated. As we have seen, the CSS class t-MediaList-badgeWrap is used to style this element but I am not sure I understand the difference why it is rendered differently in Firefox vs IE.  The reason I want to fix this is because I am putting another FA icon inside the badge based on the number displayed in the badge and now it looks even worse in IE compared to Firefox

                       

                      Any ideas?

                      • 8. Re: Dynamic List - Media list template
                        fac586

                        partlycloudy wrote:

                         

                        Minor nit...my example page looks flawless in Firefox but in IE 11, the badge is (vertically) elongated. As we have seen, the CSS class t-MediaList-badgeWrap is used to style this element but I am not sure I understand the difference why it is rendered differently in Firefox vs IE. The reason I want to fix this is because I am putting another FA icon inside the badge based on the number displayed in the badge and now it looks even worse in IE compared to Firefox

                         

                        Any ideas?

                        The usual one: stop using IE.

                         

                        The outer element of the badge is displayed by the template option CSS rule:

                         

                        .t-MediaList--showBadges .t-MediaList-badgeWrap {
                            display: flex;
                        }
                        

                         

                        and the word on flex box in IE11 is: "...large amount of bugs present". A recent CSS feature is buggy in IE. Fancy that.

                         

                        I haven't been able to get any of the suggested fixes working, although a horrible hack seems to do the trick. Put the following override rule in the page Inline CSS or Theme Roller Custom CSS depending on how widely you want to apply it:

                         

                        .t-MediaList-badgeWrap {
                          display: block !important;
                        }
                        

                         

                        Tested on Safari 11.1, Firefox 60, and IE11.

                         

                        If I can stand spending any more time in what Microsoft claim to be developer tools I'll see if I can find a truly flex-compatible solution.

                        • 9. Re: Dynamic List - Media list template
                          partlycloudy

                          Another question... When the list query returns no data, how/can a message be displayed to indicate such?

                          • 10. Re: Dynamic List - Media list template
                            fac586

                            partlycloudy wrote:

                             

                            Another question... When the list query returns no data, how/can a message be displayed to indicate such?

                            A good question. The CSS solution is still on the drawing board, leaving us with the options of using server-side conditional rendering or jQuery. The former is inefficient as it involves running a variant of the list query twice, so we'll go with a dynamic action.

                             

                            1. Use the CSS Classes property in the list region attributes to give the list a selectable identifier (e.g foo).

                             

                            2. Add the message as an initially hidden list region Footer Text:

                             

                            <p style="display: none">Nothing to see here.</p>

                             

                            3. Create a Page Load DA with a Show true action, targeting the jQuery selector:

                             

                            .foo:not(:has(li)) + p

                             

                            i.e. show the paragraph following the .foo list if it contains no elements.

                             

                            If you want more sophisticated formatting of the message, the same method should work with the list and an alert region as subregions of a wrapper region.

                            • 11. Re: Dynamic List - Media list template
                              partlycloudy

                              Nice idea. Of course, a declarative No Data Found Message attribute would have been the preferred solution, similar to report regions. Between this and the strange choice to use columns by position and not by name to substitute values in the list template, it is almost as if Oracle doesn't expect dynamic lists to be utilized much! To be fair, after a certain point a classic report and dynamic list are essentially the same component, both take a set of rows returned by a SQL query and render it based on a template, as Carsten demonstrates nicely here. But here again, Oracle has chosen to provide the Media List template only for the List component and not for classic reports.

                               

                              P.S. I ended up modifying the list query to always return at least 1 row (with the appropriate content & artwork to represent the no data found condition) to provide a consistent UI

                              • 12. Re: Dynamic List - Media list template
                                fac586

                                partlycloudy wrote:

                                 

                                Nice idea. Of course, a declarative No Data Found Message attribute would have been the preferred solution, similar to report regions. Between this and the strange choice to use columns by position and not by name to substitute values in the list template, it is almost as if Oracle doesn't expect dynamic lists to be utilized much! To be fair, after a certain point a classic report and dynamic list are essentially the same component, both take a set of rows returned by a SQL query and render it based on a template, as Carsten demonstrates nicely here. But here again, Oracle has chosen to provide the Media List template only for the List component and not for classic reports.

                                I posted some thoughts on differences between lists and reports that might influence when they are used here: Conditional colours in cards report (5.0)

                                P.S. I ended up modifying the list query to always return at least 1 row (with the appropriate content & artwork to represent the no data found condition) to provide a consistent UI

                                I thought about that. Whether it's possible to do so obviously depends on the nature of the data and format of the list.