This is Part 3 in my Blogpost Series on improving the APEX mobile Theme. I recommend to read Part 1 and Part 2 before continuing here.
In this Post we deal with a special list template which we will use to create a Icon Home Screen (or a Icon Menu).
Home Screen
Since the very first Smartphones everyone is used to have a screen full of icons with with a small title underneath. Exactly that is what we want to build, since this gives our application a very nice start menu, like this:
The List Definition
The first thing we need is an APEX List. So go to shared components and create a static list with as many entries you want. Pick an image from the Popup LOV for each entry, use 64×64 size or bigger.
Of course you can also use a dynamic list and read the menu-data from one of your tables, but please also make sure to include a nice image which should be located somewhere in or under your images-directory (/i/ by default).
The icons/images i used in the example above are all from the standard icon set delivered with APEX, but you can also use your custom images or icon sets.
The Template
This time we cannot use a predefined function or widget from jQuery mobile, unfortunately they don’t provide a responsive grid, which is the base of a Home Screen. Image some of the icons (list entries) are conditional or bound to specific privileges and don’t show up for every user. You wouldn’t want to have a blank screen where that icon should appear. Same with different screen sizes, there should be no gaps. On some screens there will be 3 icons in one row, on others there are 4, or 2, or 5…
So what we will use instead of a responsive grid is a simple floating CSS “grid” and use that in our list template.
Create a new list template from scratch, name it “Home Screen” and use the following definition.
List Template Before Rows
It might be a little unusual to include CSS definitions in a template, but for this one i think it is ok. There will be only a single home screen (at least just one per page).
<style type="text/css"> .mainMenuIcon { display: block; position: relative; float: left; text-align:center; } .mainMenuIcon a.ui-link, .mainMenuIcon a.ui-link:visited, .mainMenuIcon a.ui-link:hover, .mainMenuIcon a.ui-link:active { color: #4E4E4E; font-weight: normal; text-decoration: none; } @media screen and (max-width:1921px) { .mainMenuIcon { width: 176px; height: 184px; } .mainMenuIcon img { width: 112px; } .mainMenuIcon a.ui-link, .mainMenuIcon a.ui-link:visited, .mainMenuIcon a.ui-link:hover, .mainMenuIcon a.ui-link:active { font-size: 20px; } } @media screen and (max-width:481px) { .mainMenuIcon { width: 96px; height: 100px; } .mainMenuIcon img { width: 64px; } .mainMenuIcon a.ui-link, .mainMenuIcon a.ui-link:visited, .mainMenuIcon a.ui-link:hover, .mainMenuIcon a.ui-link:active { font-size: 14px; } } </style> <div>
List Template Current (and Noncurrent)
<div class="mainMenuIcon" #IMAGE_ATTR#> <a href="#LINK#" rel="external"> <img src="#IMAGE_PREFIX#&ICON_PATH.#IMAGE#" /> <div>#TEXT#</div> </a> </div>
Template After Rows
</div>
Every other Template setting should be empty, except the ones listed above.
Now create a new page with a list-region where you use the newly created icon-list and the Home Screen Template.
Isn’t that beautiful?
If you test that on a desktop browser try also to resize the browser and make it very small. You’ll see a point where the icons suddenly get smaller. This is due to our CSS media queries for optimized resolution on either smartphone and table screens.
You can also try different sizes of Icons and adapt the CSS to support more/less icons per row.
This is why i love APEX lists, you can use them for so many occasions.
Great example, just one small omission, you need to add
class=”mainMenuIcon”
to the ATTRIBUTES item in the List entry so that the list will utilise the CSS that you have defined in the template.
Alternatively you can add class=”mainMenuIcon” to the template itself, in the “List Template Current (and Non-Current)”. Eg:
#TEXT#
Thanks
Chris,
thanks for seeing that. Naughty wordpress stripped away the class-attribute when copy-pasting into the editor…
Is there any way to get apex app export of you examples?
rg
Damir
Damir,
I think it is a better experience to actually create those templates on your own, as described in the post. This way you get a better learning experience ;-)
Peter,
Many thanks for this post. Easy to use, even for a beginner like myself.
Colin
Just one little question. I’ve made a new home screen using instructions above. I’ve managed to change the default page after a login to my new home screen. The home button in the top left corner however, is still pointing to my old homepage. How can I set this to my new home screen (page 8 in this case)?
I’ve tried changing the home url under the user interface details, but it doesnt seem to change anything.
Any idea?
Colin,
check the Global Page (Page Zero). There you’ll find a Home-Button with a redirect to Page 1. Change that to your new homepage.
Peter,
Many thanks! It works. Incredible how easy it actually was.
Great work! I got the template to work perfectly with APEX images, however I cannot get it to work with uploaded images, I tried changing the #IMAGE# tag to #WORKSTATION_IMAGES# and no luck. Any help is appreciated!
#IMAGE# refers to the image name. #IMAGE_PREFIX# to the location, this is also what you need to change to #WORKSPACE_IMAGES#
Pardon my ignorance for a minute please, I am relatively new to APEX coding. I tried adjusting the code using #WORKSPACE_IMAGES# (typed it wrong in the above post) and still cannot get the images to show.
#TEXT#
I have tried replacing #IMAGE-PREFIX# &ICON_PATH #IMAGE# and many combinations of them, still no luck on getting uploaded images to show.
What should the img src tag look like! And thank you again, I love what you have done here.
Chip,
the line must read img src=”#WORKSPACE_IMAGES##IMAGE#”
If that doesn’t work, then investigate the created img-tag with firebug or your browser development tools.
Hi Peter, this is great, thank you very much!
Just in case Chip hasn’t find its way to solve this, let me tell you I had same issue. It Happens that when in template one uses: img src=”#WORKSPACE_IMAGES##IMAGE#” means the when setting the image parameter in the list entry be sure to remove the #WORKSPACE_IMAGES# portion, if not removed this will concatenate to:
img src=”#WORKSPACE_IMAGES##WORKSPACE_IMAGES##IMAGE#” and of course will not work.
just leaving this quick note just in case.
Thanks, this is awesome!
Thank you, it works brilliantly, even in Apex5