Page Comparison

Description

Excerpt
Showing images

...

Displaying images It can be useful to the mobile user.

Introduction

The built-in item image feature must be enabled using Mobile Configuration Files.

Contents

Table of Contents

maxLevel	2

How Images are requested from the backend

Images on Order lines

Mobile Configuration Files application.cfg "listConfiguration" has imageElements to define when to display images.

"imageElements" uses a value named "ItemImage".

Flow

The Mobile app requests document type "GetOrderLines"

1. The reponse includes the "ItemImage" value for each line
2. The value is a combination of Item No. and the DateTime when the image was changed
The Mobile app requests document type "GetMedia" for each image
1. These requests are sent ad-hoc, one after the other
2. The images will appear to the user, one by one

Mobile app requests images when

The images has not yet been requested
"ItemImage" value has changed = the image has changed in the backend

Guidelines for format, sizes and file type

Format / file type

Currently there is support for JPG, PNG, GIF and SVG.
However in general we advice to use either JPG or PNG and only use SVG or GIF if there is a very specific need for these.

...

https://www.practicalecommerce.com/Image-Formats-What-s-the-Difference-Between-JPG-GIF-PNG

PNG vs JPG

This table shows the advantages of the two types.
The Mobile WMS application have different backgrounds when showing the registration collector or showing lists.
Therefore if you have the option to use transparent background in the images then you should use png images however if you have a background that you are always using on the images that might also work for the jpg.

...

Image source: https://www.digitaltrends.com/photography/jpeg-vs-png/

Pixels and Mb (file sizes)

Pixels

Images can have different height and width but it is rare that we see a need for an image larger than 500 x 500 pixel.

If the "show image" feature is in use the format should minimum be 250 pixels.

Size

The smaller the file size the faster the images will be transferred to the device. In general it is a good idea not to use images about 150 Kb and smaller is preferred however if there is only a few lines on each page then larger images will also work smoothly.

Notice for PNG file it is often possible to save them as a 8-bit file that will reduce the size of the image a lot.

Summary

Recommended

Other considerations

File type

PNG

JPG can also be used if the images has a background.
SVG and GIF are also support but should only be used if necessary.

Notice for PNG file it is often possible to save them as a 8-bit file that will reduce the size of the image a lot.

Format / Pixels

Max 500 x 500

Max 1000 x 1000 for tablets

If "show image" feature is in use minimum 230 pixels in height and width.

The is not constraint for height and width so the can vary in size independently.

Size

5-60 Kb

Max 150 Kb depending on how many lines per page.
Large images can be handled but will slow the showing of images down.

Backend requirements - GetMedia

Request

Code Block

language	xml
theme	Confluence

<?xml version="1.0" encoding="ISO-8859-1"?>
<request xmlns="http://schemas.microsoft.com/Dynamics/Mobile/2007/04/Documents/Request" created="2018-10-30T20:02:47+01:00" name="GetMedia">
  <requestData name="GetMedia">
	<mediaIds>
		<image>TF-001_201001013344</image>
		<image>TF-002_201001013344</image>
	</mediaIds>
	<screenHeight>497</screenHeight>
    <screenWidth>320</screenWidth>
  </requestData>
</request>

The MediaID is the value sent to the backend to identify the image. The MediaId origins from a property received from the backend so that the value e.g. contain a date for when it was updated. E.g. TF-001_201001013344.

Response

Code Block

language	xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<response status="Completed" messageid="09F553A1-24F9-41B3-93CF-DA242C677633" xmlns="http://schemas.microsoft.com/Dynamics/Mobile/2007/04/Documents/Response">
  <description/>
  <responseData>
    <media>
      <image id="TF-001_201001013344">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</image>
	  <image id="TF-002_201001013344">....</image>
  	</media>
  </responseData>
</response>

Where you can use images

Image elements on ListConfigurations

Code Block

language	xml
theme	Eclipse

<imageElement height="5%" width="5%" dataMember="Status" horizontalAlignment="right" verticalAlignment="bottom" actionid="" >
<values>
<value imageId="unlocked" dataMemberValue="1" />
<value imageId="locked" dataMemberValue="2" />
</values>
</imageElement>

...

Code Block

language	xml
theme	Eclipse

<imageElement width="25%" height="25%" sourceId="{ItemNumber}" horizontalAlignment="right" ></imageElement>

<textElement fontId="contentFont" text="{DisplayLine5}" />

Order Lines

List configuration

Extended view (Long renderer)

...

Code Block

language	xml
theme	Eclipse

<BaseOrderLine xmlns="http://schemas.taskletfactory.com/MobileWMS/BaseDataModel">
 <OrderBackendID>RE000111</OrderBackendID>
 <LineNumber>20000</LineNumber>
 <FromBin/>
 <ValidateFromBin>false</ValidateFromBin>
 <ToBin/>
 <ValidateToBin>false</ValidateToBin>
 <ItemNumber>TF-002</ItemNumber>
 <ItemBarcode>3046920028370</ItemBarcode>
 <
..
we add the information just like the lookup with a property collection
..

 </BaseOrderLine>

Lookup item

It is possible to add and image to the help label in html.
Here an example where an image is sent as a base64 string: response.xml

It is also possible to an image to the help label via html as a img href.

Locate item

The locate item uses a list configuration therefore it will also be able to show the image.

Show Image

Code Block

language	xml

    <page id="ReceiveLines" type="OrderLines" icon="mainmenureceive">
      <title defaultValue="@{PageReceiveOrderLinesTitle}"/>
      <orderLinesConfiguration promptUserToPostWhenAllLinesComplete="true" suggestQuantity="true" verifySingleScanRegistrations="false">
		...
      </orderLinesConfiguration>
      <actions>

--->	<showImage enabled="true" title="Show Image" imageProperty="ItemNumber" /> 

        <open icon="mainmenuscaninfo" id="ItemCrossReference" title="Add cross reference">
		...
        </open>
      </actions>
    </page>

...

Versions Compared

Old Version 7

New Version Current

Key

Description

Introduction

How Images are requested from the backend

Images on Order lines

Flow

Mobile app requests images when

Guidelines for format, sizes and file type

Format / file type

PNG vs JPG

Pixels and Mb (file sizes)

Pixels

Size

Summary

Backend requirements - GetMedia

Request

Response

Where you can use images

Image elements on ListConfigurations

Order Lines

Lookup item

Locate item

Show Image