Oracle cloud : Failure of Web Server Bridge

fac586

higgy7 wrote:

Hi I am relatively new when it comes to Apex,i can usually get the application to do what i want but when it comes to getting a really nice layout i really struggle with fine tuning.

I have a page with a list to display links to other pages using the card template. I also have several classic reports which use the badge list template. I also have some graphs underneath. All this is fine and works well but i struggle to get it to all line up nicely. For example i can get the card list to use the whole width of the page but not the badges or graphs, so i either have them covering a larger width or i restrict them to 10 columns which lines up with the badges and graphs. However this does not make good use of the space available.Note i have had to cover some headings and content with red.

I would also like to be able to set the height of the card list so that it doesn't change when the screen size is smaller. If these were smaller it would mean the badges could also be seen on the screen.

Any help or advice on page layouts would be greatly appreciated.

First things first:

What is the APEX version?
What version of the Universal Theme is being used (see the File Prefix property at the bottom of the theme page).

You appear to have:

A single Cards report showing 7 cards
5 separate Badge List reports
5 separate Chart regions showing vertical bar charts

Is that correct? Are those numbers fixed?

I would also like to be able to set the height of the card list so that it doesn't change when the screen size is smaller. If these were smaller it would mean the badges could also be seen on the screen.

I'm not clear on that. What is causing the height of the cards to vary? Post the region layout settings and template options, and the card report template options (as text, not screenshots).

fac586

higgy7 wrote:

I have a page with a list to display links to other pages using the card template. I also have several classic reports which use the badge list template. I also have some graphs underneath. All this is fine and works well but i struggle to get it to all line up nicely. For example i can get the card list to use the whole width of the page but not the badges or graphs, so i either have them covering a larger width or i restrict them to 10 columns which lines up with the badges and graphs. However this does not make good use of the space available.

It's a consequence of having a 12 column layout grid that isn't exactly divisible by either 5 or 7. The 10 column layout looks better when it is centred by starting in column 2:

Another possibility would be to display the badge list using a single, multi-column report rather than separate regions, and use asymmetric column spans for the charts:

Splitting the charts over two rows could also be considered:

Changing the grid system to use 10 columns instead of 12 is possible, but also a lot more complicated. I'd like to know more about how you'd want the layout to respond "when the screen size is smaller" before exploring that any further.

1 person found this helpful

higgy7

Thanks for the quick response. To answer your questions.

What is the APEX version? 18.1.0.00.45

What version of the Universal Theme? theme_42/1.2/

You appear to have:

A single Cards report showing 7 cards
5 separate Badge List reports
5 separate Chart regions showing vertical bar charts

Is that correct? Are those numbers fixed?

Yes they may change in future but for now they are all fixed. All your comments have been very useful, particularly putting the badges into a multi column report.

So for the cards list on one screen it looks like this:

But on a smaller screen it look like this where the bottom is out of line:

Layout and Template Settings

Layout

Sequence 20

Parent Region –Select-

Position – Content Body

Start New Row Yes

Column Automatic

Column Span 10

Column CSS Classes

Column Attributes

Appearance

Template Standard

Template Options:

Use template defaults

Body Height – Auto

Header – Hidden but accessible

Accent Default

Style Remove Borders

Body Overflow Scroll- Default

Item Padding Default

Item Size Default

Item Width Default

Label Alignment Right

Label Position Inline – Default

Top Margin Default

Bottom Margin Default

Left Margin Default

Right Margin Default

fac586

higgy7 wrote:

So for the cards list on one screen it looks like this:

But on a smaller screen it look like this where the bottom is out of line:

Layout and Template Settings

Layout

Sequence 20

Parent Region –Select-

Position – Content Body

Start New Row Yes

Column Automatic

Column Span 10

Column CSS Classes

Column Attributes

Appearance

Template Standard

Template Options:

Use template defaults

Body Height – Auto

Header – Hidden but accessible

Accent Default

Style Remove Borders

Body Overflow Scroll- Default

Item Padding Default

Item Size Default

Item Width Default

Label Alignment Right

Label Position Inline – Default

Top Margin Default

Bottom Margin Default

Left Margin Default

Right Margin Default

Those are the region settings. What are Cards report options (under the "Attributes" node)?

higgy7

Sorry,

Are these the settings you mean:

General Use Template Defaults

Style: Featured

Layout: Span Horizontally

Body Text: Hidden

Animation: colour Fill

fac586

higgy7 wrote:

Are these the settings you mean:

General Use Template Defaults

Style: Featured

Layout: Span Horizontally

Body Text: Hidden

Animation: colour Fill

Yes, that's what I was using too. The ragged bottoms on the cards are due to their height changing as the text wraps in response to the card width reducing on smaller screens. Neither "Span Horizontally" nor any of the other layout template options are capable of meeting both layout requirements—equally sized cards spanning the full width of the page. What's missing is the "Flexible Box" option provided on the Badge List.

Since there aren't any effective layout options, I settled on changing the card content: equalising the length of the titles by moving the "subsidiary" information ("Full List", "Summary" etc) to separate subtitles; and disabling word wrapping so that reductions in card width do not change the height.

The cards list was extended by adding the "subsidiary" text as user-defined attribute 7, and the shortened main titles added as attribute 8.
A new dynamic list was created on top of this using a query on the APEX_APPLICATION_LIST_ENTRIES view, replacing all of the spaces with non-breaking spaces (U+00A0) to prevent word wrapping:

select

null                                              lvl

, replace(entry_attribute_08, ' ', unistr('\00a0')) label

, entry_target target

, 'NO' is_current

, entry_image img

, null img_attr

, null img_alt

, null a01

, null a02

, null a03

, null a04

, null a05

, entry_attribute_06 a06

, replace(

    coalesce(entry\_attribute\_07, ' ')

  , ' '

  , unistr('\\00a0'))                              a07

from

apex\_application\_list\_entries

where

application\_id = :app\_id

and list_name = 'Page Navigation'

order by

display\_sequence

The cards region source was changed to the new list.
The Display Subtitle template option was activated.

Some of this could be done using CSS, but I was intent on a solution that only used built-in features, without recourse to custom templates, CSS, or JavaScript.

The result looks like this:

This is probably acceptable for desktops. It remains legible in a maximised browser window on 5 of the 6 most common desktop screen resolutions (all of them if the navigation menu is minimised or hidden). The real problem is that the "Span Horizontally" layout option isn't responsive. If by "smaller screens" you mean "fully legible and accessible from phones to workstations" then we'd have to go outside the box to meet the design goals, using custom templates and CSS.

higgy7

Thanks for this would you be able to walk me through this as i'm not exactly sure how to implement.

This is what i tried to do, first create a static list called Page Navigation and made the name of each link shorter:

I then created another dynamic list and copied your sql as above:

I then set the report list on the page to have the source of the new dynamic list and in the attribute template options i selected display subtitle. I can get the links to work but no titles or subtitles appear. Where do i enter these details; Title, subtitle and disable word wrapping?

fac586

higgy7 wrote:
Thanks for this would you be able to walk me through this as i'm not exactly sure how to implement.
This is what i tried to do, first create a static list called Page Navigation and made the name of each link shorter

You shouldn't need to create another list. What list was the cards region originally based on?

higgy7

It was based on a static list called Standard CAR Reports

I had added in font size and break points to try and get around the size issue. So do i just remove the html brackets and point the dynamic list at Standard CAR Reports instead of Page Navigation?

fac586

higgy7 wrote:

It was based on a static list called Standard CAR Reports

I had added in font size and break points to try and get around the size issue. So do i just remove the html brackets and point the dynamic list at Standard CAR Reports instead of Page Navigation?

Yes. Looks like you were trying the complete opposite to me.

Edit the Standard CAR Reports list entries, setting user defined attribute 7. Subtitle to the subsidiary text, and attribute 8. to the shortened title text.

Change the WHERE clause in the dynamic list definition to reference **'**Standard CAR Reports'.

higgy7

Thanks i'm getting close

On a smaller screen it looks like this now:

Is this to do with word wrapping? I have't set anything on it

fac586

higgy7 wrote:

Thanks i'm getting close

On a smaller screen it looks like this now:

Is this to do with word wrapping? I have't set anything on it

Word wrapping will never occur because the dynamic list definition replaces all of the spaces in the titles with non-breaking spaces which don't allow text to wrap at at breaks between words.

What are the acceptance criteria here? In terms of being able to show a single row of equal height cards that spans the width of the screen, we are at or (it seems) beyond the limits of what is possible with out-of-the-box APEX components and options. To get something working acceptably on smaller devices something has to give: the contents of the cards; the single row layout; the use of the cards component; or we have to use custom templates/options/CSS.

What screen sizes are you trying to support?

What should happen as the screen size is reduced (e.g. maintain one row of cards with progressively less text and smaller icons; split the same information over more than one row etc)?

How do you (and your organisation) feel about customisation?

higgy7

Ideally maintain one row of cards with progressively less text or smaller text size and smaller icons

fac586

I threw in the towel on out-of-the-box solutions prematurely. The comment I made above about "progressively less text" got me thinking about the possibilities of responsive utility classes. I've used these in two ways, and the result finally seems to tick all of the boxes.

The starting point is the Standard CAR Reports static list. I kept your original labels in case these are required if the list is used elsewhere. I added the subsidiary text as user defined Attribute 07 (based on its use in the Cards template); the short label as Attribute 08; and as Attribute 09, the short label marked up with responsive utility classes to control how the text is displayed at different screen sizes. These are explained below.

Two page regions are required. The first is used to display the links as Cards on small, medium, and large screens (width ≥ 768 pixels). The CSS Classes property on the region is therefore set to hidden-xs-down to hide this region on smaller screens.

The Cards region is based on a dynamic list called Standard CAR Reports (responsive cards) that extracts the required information from the static definition:

select

null                                    lvl

, entry_attribute_09 label

, entry_target target

, 'NO' is_current

, entry_image img

, null img_attr

, null img_alt

, null a01

, null a02

, null a03

, null a04

, null a05

, entry_attribute_06 a06

, coalesce(entry_attribute_07, ' ') a07

from

apex\_application\_list\_entries

where

application\_id = :app\_id

and list_name = 'Standard CAR Reports'

order by

display\_sequence

The second is a Media List region that displays the links as a vertical list on x-small and xx-small screens (< 728 pixels wide). Its CSS Classes property is set to hidden-sm-up to hide this region on larger screens.

The Media List region is based on a dynamic list called Standard CAR Reports (media list) that extracts the required information from the static definition:

select

null                                    lvl

, entry_attribute_08 label

, entry_target target

, 'NO' is_current

, entry_image img

, null img_attr

, null img_alt

, coalesce(entry_attribute_07, ' ') a01

, null a02

, null a03

, null a04

, null a05

, entry_attribute_06 a06

from

apex\_application\_list\_entries

where

application\_id = :app\_id

and list_name = 'Standard CAR Reports'

order by

display\_sequence

Note why it is necessary to have two distinct lists:

The Cards list label is sourced from user defined attribute 9, where the text is marked up with responsive modifier classes. The Media List label is the basic short label from user defined attribute 8.
The Cards subtitle comes from attribute 7, the Media List subtitle from attribute 1.

On viewing the page in a maximised desktop browser we see the desired single row of equal height cards. However, as seen in previous posts, at some lower desktop resolutions (< 1350 pixels wide), some of the card titles are too long to fit the available card width. We can't leave it to the browser and APEX to wrap the text because this results in the cards having different heights. The solution is the   element included in the card title mark-up. The [hidden-md-down](https://apex.oracle.com/pls/apex/apex_pm/r/ut/responsive-utilities) modifier class makes this element visible only when the browser viewport is at least 1200 pixels wide, resulting in the titles being split over two lines so that they fit into the card width at all window sizes > 1200 pixels wide. Unfortunately it is not easy to undo this at widths > 1350 pixels because the APEX responsive breakpoints max out at 1200 pixels.

dashboard lg.png

When the browser width decreases to the medium size between 992 and 1200 pixels wide, there is still a single row of equal height cards, but the titles are shortened again and only appear on one line. The line breaks and some of the title text have disappeared as a result of the [hidden-md-down](https://apex.oracle.com/pls/apex/apex_pm/r/ut/responsive-utilities) modifier class being applied to these elements.

dashboard md.png

When we hit the small screen size below 992 pixels wide the Cards presentation is still possible due to the space freed up by APEX minimising the navigation menu:

dashboard sm.png

At the x-small and xx-small level (width < 768 pixels) the horizontal Cards region is replaced by the Media List which shows the links vertically:

dashboard xxs.png

1 person found this helpful

higgy7

This looks really promising. I have added attribute 9 to each entry as above and created 2 dynamic lists as follows:

Media List

Card List:

I have added 2 regions one for cards and one for media

I added the css class as follows is this correct?

With the page set as above it shows both the cards and media list, am i doing something silly?

fac586

I can't see anything obvious above. The responsive modifier classes are not documented in the APEX 18.1/UT 1.2 Universal Theme Sample App, but they do exist and they are working in my tests.

I have added a download link in the navigation bar of the demo app. Download it and install on apex.oracle.com or a local 20.1 instance so you can see exactly how it works.

higgy7

Thanks for all your help. I can't import it into our version of apex but will try and get installed on apex.oracle.com. Was the CSS classes under appearance the correct play to enter the css?

fac586

higgy7 wrote:

Was the CSS classes under appearance the correct play to enter the css?

Yes.

higgy7

Thanks I have managed to import your application. The css must not work with my version of apex unfortunately, as it looks like i have done exactly the same as you.

fac586

higgy7 wrote:
Thanks I have managed to import your application. The css must not work with my version of apex unfortunately, as it looks like i have done exactly the same as you.

It's working on apex.oracle.com with a 20.1 application switched to the 18.1/UT 1.2 theme. Have you tried running your app on apex.oracle.com?

APEX

Oracle cloud : Failure of Web Server Bridge

Comments

Post Details