APEX 18.2 Radiogroup/List of Values

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?

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.

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

cgrav wrote:

 

Do I still need the rpad?

No.

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.

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.

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.