1 2 3 Previous Next 36 Replies Latest reply on Jun 20, 2019 1:04 PM by cgrav

    APEX 18.2 Radiogroup/List of Values

    cgrav

      I have a SQL query that is being used to create a radiogroup/list of values.

       

      The query looks something like this:

       

      select value 1 || ' ' || currency value d, value 2 r

      from table

       

      Results from query:

      Milk     $1.00

      Toast     $3.00

      Pie     $0.50

      Bread     $10.00

       

      I am trying to get the currency values to  line up nicely with each other, but I am unable to do so. I have tried using rpad and lpad.

       

      Results I would like to see:

      Milk          $1.00

      Toast        $3.00

      Pie           $0.50

      Bread     $10.00

       

      OR

       

      Milk          $1.00

      Toast        $3.00

      Pie           $0.50

      Bread       $10.00

       

      I was just wondering if anyone else has done something similar, and got it to work.

        • 1. Re: APEX 18.2 Radiogroup/List of Values
          fac586

          cgrav wrote:

           

          I have a SQL query that is being used to create a radiogroup/list of values.

           

          The query looks something like this:

           

          select value 1 || ' ' || currency value d, value 2 r

          from table

           

          Results from query:

          Milk $1.00

          Toast $3.00

          Pie $0.50

          Bread $10.00

           

          I am trying to get the currency values to line up nicely with each other, but I am unable to do so. I have tried using rpad and lpad.

           

          Results I would like to see:

          Milk $1.00

          Toast $3.00

          Pie $0.50

          Bread $10.00

           

          OR

           

          Milk $1.00

          Toast $3.00

          Pie $0.50

          Bread $10.00

           

          I was just wondering if anyone else has done something similar, and got it to work.

          That would only work if the item was presented using a monospaced font, which I don't think would be a good idea.

           

          Using standard items and LOVs it's also impossible to include additional mark-up in the radio group labels that would permit more sophisticated styling options to be used.

           

          That leaves either using JavaScript and CSS to modify the labels at runtime, or creating an item plug-in (which would appear to have very limited potential for reuse).

           

          How many times would this be required in the application? Would it be required across multiple applications?

          • 2. Re: APEX 18.2 Radiogroup/List of Values
            cgrav

            This would only need to be done on the first page of the application, and only used within this application.

            • 3. Re: APEX 18.2 Radiogroup/List of Values
              fac586

              cgrav wrote:

               

              This would only need to be done on the first page of the application, and only used within this application.

              OK, I would suggest using a JS dynamic action to modify the label mark-up by wrapping the price values in <code>span</code> elements, with CSS to adjust the spacing. Create a example on apex.oracle.com if you need help with this.

              • 4. Re: APEX 18.2 Radiogroup/List of Values
                fac586

                cgrav wrote:

                 

                This would only need to be done on the first page of the application, and only used within this application.

                I've had the time to try this out.

                 

                1. Create a dynamic action:

                 

                Event: After Refresh

                Selection Type: Item(s)

                Item(s): <radio group item>

                Event Scope: Dynamic // allows for the possibility of the item being refreshed

                 

                True Action: Execute JavaScript Code

                Fire on Initialization: Yes

                Code:

                $(this.triggeringElement)
                  .find('label')
                    .each(function () {
                      var label = $(this);
                      label.html(label.text().replace(/^([^ ]+) ([^ ]+)$/, "$1 <span>$2</span>"));
                });
                

                 

                2. Add styling to the page Inline CSS property, changing the item name ID selector as required:

                 

                #PX_ITEM_NAME label {
                  width: 100%;
                }
                #PX_ITEM_NAME label span {
                  float: right;
                }
                
                • 5. Re: APEX 18.2 Radiogroup/List of Values
                  cgrav

                  I did what you described above, but I do not see any changes.

                  • 6. Re: APEX 18.2 Radiogroup/List of Values
                    cgrav

                    Can you please explain a little as to what is taking place?

                    • 7. Re: APEX 18.2 Radiogroup/List of Values
                      cgrav

                      Do I still need the rpad?

                      • 8. Re: APEX 18.2 Radiogroup/List of Values
                        fac586

                        cgrav wrote:

                         

                        Do I still need the rpad?

                        No.

                        • 9. Re: APEX 18.2 Radiogroup/List of Values
                          fac586

                          cgrav wrote:

                           

                          Can you please explain a little as to what is taking place?

                          The labels on the radio group options are being modified by wrapping the price values in a HTML span element which can then be positioned using CSS.

                          I did what you described above, but I do not see any changes.

                          Post all of the settings and code used (as text, not screenshots).

                           

                          As stated above, if you are having problems implementing a solution the best way to get help is to reproduce the problem in a shared workspace on apex.oracle.com.

                          • 10. Re: APEX 18.2 Radiogroup/List of Values
                            cgrav

                            I created a workspace on apex.oracle.com. Whay now?

                            • 11. Re: APEX 18.2 Radiogroup/List of Values
                              fac586

                              cgrav wrote:

                               

                              I created a workspace on apex.oracle.com. Whay now?

                              Create or upload an app that demonstrates the problem.

                               

                              Create a guest user with developer privileges and post the workspace name, username, and password here.

                              • 12. Re: APEX 18.2 Radiogroup/List of Values
                                cgrav

                                workspace: cg-test

                                 

                                user: guest

                                 

                                password: password1

                                • 13. Re: APEX 18.2 Radiogroup/List of Values
                                  fac586

                                  cgrav wrote:

                                   

                                  I did what you described above, but I do not see any changes.

                                  Two things:

                                   

                                  1. Nowhere did it say to put the JS code in a function in the Function and Global Variable Declaration page property. The this.triggeringElement object is not in scope there, so the required jQuery object cannot be instantiated. Simple, one-off code like this can be included in the DA Code attribute (and needs to be in order to access this.triggeringElement, although that object can of course be passed as a parameter to a function defined elsewhere).
                                  2. The LOV values are not being constructed using the simple select value 1 || ' ' || currency value d, value 2 r from table in the OP. The to_char output in your LOV definition generates multiple spaces between the item and currency values. The regular expression in the JS action can be modified to handle this:

                                   

                                  $(this.triggeringElement) 
                                    .find('label') 
                                      .each(function () { 
                                        var label = $(this); 
                                        label.html(label.text().replace(/^([^ ]+) +([^ ]+)$/, "$1 <span>$2</span>")); 
                                  });
                                  

                                   

                                  You will probably also need to use the Column Span grid layout property and Stretch Form Item template option to control the width of the control.

                                   

                                  See modified example on page 586 of the demo app.

                                  • 14. Re: APEX 18.2 Radiogroup/List of Values
                                    cgrav

                                    Your page looks Great!

                                     

                                    However, I am still unable to get my real application to do what you have. I made all the changes I see your page has, but nothing changes.

                                    1 2 3 Previous Next