Sometimes a webpage can be very chaotic, especially when there are many items on the screen. In that case, it may be a good idea to group items into logical sections. The sections can be displayed separately to save room for the rest of the items. We will make a webpage where the user can edit the user profile. This user profile will be divided into three categories: person, communication, and favorites. The user will be able to click on a button just to see only the category the user is interested in.
We will use the table APP_USER_PROFILES
, so make sure this table exists and is accessible.
First, make a form based on a table:
The page is now ready but we will now split the various items into three categories.
Now we have three regions with items from the APP_USER_PROFILES
table. It will look like the following:
In order to create a region selector, we will have to indicate that the regions can be selected by the region selector.
The last step is to create a region selector.
The region display selector is now ready but we will include the region in the User region so that it looks like this all is part of one region:
Now we will do the same for the three other regions:
The region display selector is actually an unnumbered list. This list contains list items and each list item has a reference to a region. In HTML, this looks like the following:
<ul id="96054411561206575_RDS" class="apex-rds"> <li class="apex-rds-first apex-rds-selected"><a href="#SHOW_ALL"><span>Show All</span></a></li> <li><a href="#R96048122465171863"><span>Person</span></a></li> <li><a href="#R96048531469174507"><span>Communication</span></a></li> <li class="apex-rds-last"><a href="#R96050120519180839"><span>Favourites</span></a></li> </ul>
The<a>
tag has a reference to a region. The regions are actually divs
with an ID. You can find the ID's in the code behind the hash ("#") sign. You can assign your own ID by entering your own ID in the static ID text field in the attributes section of the region. In that case, you would have seen something like this:
<li><a href="#person"><span>Person</span></a></li>
You can also see the<span>
tag. A div
and a span
are almost identical, with the difference that a div
applies to a section of a document of the page and a span
applies to the inline text but keeps the formatting of the outside text. That is the default behavior but this can be changed by the use of cascading style sheets.
Furthermore, you saw that the three regions with items have the region without title template. This is done because otherwise you would have seen the entire region including the title, which is too much information in this little space.
The three regions with items and the region display selector all have the same parent: the User region. This is not necessary. You can also display them as separate regions.
18.118.138.195