11 Replies Latest reply: Aug 7, 2014 2:59 AM by fac586 RSS

    Select List on the Region Template Position

    Richard Legge

      Hi All,

       

      APEX 4.2 XE 11.2

       

      I have a Form which is starting to fill up with buttons, based on various actions that users wish to carry out on the data on the page.  So I have a number of buttons in the Region template, they can choose from..

       

      Id like to replace the buttons with a Dropdown Select List, and a GO button, which will submit or invoke a dynamic action based on the selected criteria..

       

      Ive looked around, but cannot see any reference or way to add an item to the Region Template position...

       

      If anyone has any ideas on how this could be achieved, Id be grateful..  Im assuming you would have to override the region and position somehow on the Select List..

       

      Kind Regards

      Richard

        • 1. Re: Select List on the Region Template Position
          fac586

          Richard Legge wrote:

           

          APEX 4.2 XE 11.2

           

          I have a Form which is starting to fill up with buttons, based on various actions that users wish to carry out on the data on the page.  So I have a number of buttons in the Region template, they can choose from..

           

          Id like to replace the buttons with a Dropdown Select List, and a GO button, which will submit or invoke a dynamic action based on the selected criteria..

           

          Ive looked around, but cannot see any reference or way to add an item to the Region Template position...

           

          If anyone has any ideas on how this could be achieved, Id be grateful..  Im assuming you would have to override the region and position somehow on the Select List..

          You could do that using CSS relative positioning but I think that creating a custom region template would be the best idea. What theme and region template are you using?

          • 2. Re: Select List on the Region Template Position
            Richard Legge

            Hi fac586.. Its the standard region template on theme 25.  thanks..

            • 3. Re: Re: Select List on the Region Template Position
              fac586
              • Create a copy of the Standard Region template as Standard Region + inline body.
              • Modify the template definition of the new template:
                1. Change the uButtonContainer element from span to div.
                2. Replace the #BODY# substitution string with the #SUB_REGIONS# substitution string.
                3. Add the #BODY# substitution string at the position you require among the button positions in the button container.

               

              <section class="uRegion #REGION_CSS_CLASSES# clearfix" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
                <div class="uRegionHeading">
                  <h1>#TITLE#</h1>
                  <div class="uButtonContainer">
                    #CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP##BODY#
                  </div>
                </div>
                <div class="uRegionContent clearfix">
                  #SUB_REGIONS#
                </div>
              </section>
              

               

              • Create a new container HTML region and assign it the new Standard Region + inline body template.
              • Create the select list item and Go button in the new container region.
              • Make your form region a subregion of the new container region, and change it to have No Template.
              • Add the following style sheet to the page Inline CSS property:

               

              section.uRegion>div.uRegionHeading .uButtonContainer {
                display: table-cell;
                text-align: right;
                font-size: 0;
              }
              #P9_X_CONTAINER {
                display: inline-block;
              }
              

               

              Replacing "P9_X" with the name of the select list item.

              • 4. Re: Select List on the Region Template Position
                Richard Legge

                Many Thanks fac.. Much appreciated.. I'll try this shortly and feedback..

                • 5. Re: Select List on the Region Template Position
                  Richard Legge

                  Hi fac586, this almost works fine... and the button is in the region title.. But no matter which I choose, I cannot get the button to sit neatly next to the select List..  

                   

                  They are both set ht of region..  If I select button top of region -> right, page title right, or in a template position, it sits just above the select box.. Ive got new line set 'No' on my select box.. ..  Did you / have you set this up? otherwise Ill create in on APEX..

                   

                  thx

                  Richard

                  • 6. Re: Select List on the Region Template Position
                    fac586

                    Richard Legge wrote:

                     

                    Hi fac586, this almost works fine... and the button is in the region title.. But no matter which I choose, I cannot get the button to sit neatly next to the select List.. 

                     

                    They are both set ht of region..  If I select button top of region -> right, page title right, or in a template position, it sits just above the select box.. Ive got new line set 'No' on my select box.. ..  Did you / have you set this up? otherwise Ill create in on APEX..

                    Please do. Sounds like there may be a problem with the application of the display: inline-block CSS rule. Use a web inspector to check the selector for this is correct and that the rule is (a) being applied; and (b) not being overridden.

                    • 7. Re: Select List on the Region Template Position
                      Richard Legge

                      Hi Fac586.. Ive added this onto APEX now.. Workspace VRS  test/test Application: 18338 page 2.  I must admint, Ive not had a chance to check further yet...

                       

                      Rgds

                      Richard

                      • 8. Re: Select List on the Region Template Position
                        fac586

                        Richard Legge wrote:

                         

                        Hi Fac586.. Ive added this onto APEX now.. Workspace VRS  test/test Application: 18338 page 2.  I must admint, Ive not had a chance to check further yet...

                        As anticipated above, the problem was the selector in the display: inline-block CSS rule. Your select list item was called 10P2_ACTION, so the selector should have been #10P2_ACTION_CONTAINER. However this isn't working in Chrome and I don't have time to investigate why. I don't know why you've departed from APEX convention and added the '10' prefix to the item name, but I wouldn't recommend it. When the item name is changed to "P2_ACTION" and the selector to #P2_ACTION_CONTAINER it's working as expected (at least in Chrome 36.0).

                        • 9. Re: Select List on the Region Template Position
                          Richard Legge

                          I've no idea.. Just that I was in a hurry.. I'm sure I checked that carefully. I'll check again tomorrow (I'm using FF.) I'll check in chrome too....

                           

                          Rgds

                          R

                          • 10. Re: Select List on the Region Template Position
                            Richard Legge

                            Thanks again.. All working..  the 10 as I mentioned, was a typo..... not spotted in my haste...  

                             

                            Reading carefully you do state, (but for the benefit of others).. the key thing here is that the select list is called  Px_NAME, and the reference in the style sheet.. (line 6 above)  is Px_NAME_CONTAINER. (keep the _CONTAINER) . As soon as I changed the style sheet locally, from P10_ACTION to P10_ACTION_CONTAINER... it worked perfectly...

                             

                            Many thanks once again fac.

                             

                            rgds

                            • 11. Re: Re: Select List on the Region Template Position
                              fac586

                              Richard Legge wrote:

                               

                              Thanks again.. All working..  the 10 as I mentioned, was a typo..... not spotted in my haste...

                               

                              Reading carefully you do state, (but for the benefit of others).. the key thing here is that the select list is called  Px_NAME, and the reference in the style sheet.. (line 6 above)  is Px_NAME_CONTAINER. (keep the _CONTAINER) . As soon as I changed the style sheet locally, from P10_ACTION to P10_ACTION_CONTAINER... it worked perfectly...

                              The reason for this is that the grid layout in theme 25 generates a div container for each item. div is a block-level element, so it is normally rendered as a separate block of content, clear of preceding and following elements. Here, as the requirement is for the region form element(s) to be displayed in-line with the region buttons, we do not want the normal div rendering. We have to override the div's default display: block property with display: inline-block to keep it on the same line as the buttons.

                               

                              If more than one region form item is to be included in-line with the buttons, change the selector in the CSS rule from #Px_ITEM_CONTAINER to use a descedent/attribute selector that will pick up all item container divs inside a region button area:

                               

                              .uButtonContainer div[id$="_CONTAINER"] {
                                display: inline-block'
                              }