·
3 min read

Adding an image to a Role Center page to fill the content area on tablets

With the introduction of the new Microsoft Dynamics NAV Tablet client, developers are looking for ways to create simple Role Centers that are ideal for use on small-screen mobile devices. If your Role Center has a few cues but no content, adding a company logo is one simple way to make it look great and personal! This blog post explains how that can be done in a few simple steps.

Note that this feature is implemented only for the Role Center pages in the Microsoft Dynamics NAV Tablet client.

Step 1: Set up the Role Center page that is used by the Microsoft Dynamics NAV Tablet client

As an example I will modify the existing Order Processor Role Center page and remove all content parts. The modified page will now look as illustrated below.

Note that the content page must contain either image or content parts. Cues are considered navigation elements which is why the SO Processor Activities part or any other part containing cues can only be added to the Role Center page in this particular scenario.

When the page is opened in the Microsoft Dynamics NAV Tablet client, it should look as illustrated below.

The page presented above does not look ideal, does it? So how do we make it more appealing? The answer is simple; by adding a company logo and make it shine.

Step 2: Add an image to the content area of the Role Center page

The developer needs a table, or more specifically a table field of type BLOB, to store an image. In this post, the Company Information table (79) is used because it has a Picture field that stores a company logo. In a real-life scenario, a dedicated table is a better solution. Because the Role Center page can contain only groups and parts, the second object that the developer needs is the card part page that will contain an image. The snippet below represents a sample page. Notice that the image has the ShowCaption property set to No. It indicates to the tablet client that such an image should fill the entire screen. Such behaviour is only implemented for Role Center pages in the tablet client.

OBJECT Page [Desired Id] Company Logo

{

  OBJECT-PROPERTIES

  {

    […]

  }

  PROPERTIES

  {

    SourceTable=Table79;

    PageType=CardPart;

  }

  CONTROLS

  {

    { 1   ;0   ;Container ;

                ContainerType=ContentArea }

 

    { 2   ;1   ;Field     ;

                SourceExpr=Picture;

                ShowCaption=No }

  }

  CODE

  {

    […]

  }

}

The last step is to modify the selected Role Center page and add the part that hosts the page created earlier. The part must be added to the RoleCenterArea, as illustration below.

Step 3: Upload the desired image to be used as logo

In case the Company Information table is used to store the image, the simplest way to upload an image is to open the Company Information page (1) in edit mode and then select an image to be displayed on the Role Center page.

Now when the Role Center page is opened, it will look like the page presented in the following picture. It is simple and looks great.

Notes

The image width and height is set to be 100% in CSS and that impacts how the image will look on a page. There are a few important things to be aware of:

  1. The image will scale to the available width of the content area and scale accordingly to its original ratio. That behaviour requires using an image that will look great on supported screen sizes and will not need to have vertical scrollbars.
  2. Because the image will grow or shrink, it is essential to upload an image of the desired resolution so that a user will not experience a decreased image quality caused by scaling. It is important to balance quality versus loading time.
  3. The image presented in the illustration above has size of 1800 x 1200 and fits Surface RT and iPad screens perfectly (the image is scaled down).
navteam

Related posts