Improve the APEX mobile Theme – Part 3

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.



  1. Chris on March 5, 2013

    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

  2. Peter Raganitsch on March 5, 2013

    Chris,

    thanks for seeing that. Naughty wordpress stripped away the class-attribute when copy-pasting into the editor…

  3. Damir Vadas on March 6, 2013

    Is there any way to get apex app export of you examples?

    rg
    Damir

  4. Peter Raganitsch on March 7, 2013

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

  5. Colin on April 4, 2013

    Peter,

    Many thanks for this post. Easy to use, even for a beginner like myself.

    Colin

  6. Colin on April 4, 2013

    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?

  7. Peter Raganitsch on April 5, 2013

    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.

  8. Colin on April 9, 2013

    Peter,

    Many thanks! It works. Incredible how easy it actually was.

  9. Chip on January 17, 2014

    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!

  10. Peter Raganitsch on January 18, 2014

    #IMAGE# refers to the image name. #IMAGE_PREFIX# to the location, this is also what you need to change to #WORKSPACE_IMAGES#

  11. Chip on January 22, 2014

    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.

  12. Peter Raganitsch on January 27, 2014

    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.

  13. Raul Castro on March 6, 2014

    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!