You are here:
Create an Image Contract
Add new or custom images when customizing the Consumer Goods offline mobile app by using new image contracts.
Required Editions
| Available in: Enterprise, Performance, and Unlimited Editions |
| User Permissions Needed | |
|---|---|
| To create an image contract | Customizer, Admin |
The Images folder is in $workspaceFolder$/src in your Modeler workspace.
- Create an XML file in a text or XML editor. Specify the filename in the $imageId$.image.xml format using alphanumeric characters in camel case. For example: Barcode.image.xml, CreateTripListIcon.image.xml.
- Save the file in the $workspace/src/Images folder in your Modeler workspace.
-
Add this code to the $imageId$.image.xml file.
<?xml version="1.0" encoding="utf-8"?><Image xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="$imageId$" schemaVersion="0.0.0.5"> <default mimetype=""> </default></Image>Set id to the unique alphanumeric ID of the image, matching the $imageID$ in the filename specified in step 1. For example: Barcode. -
Generate the Base64-string of the image by running this utility command in Modeler CLI.
sf modeler workspace utils base64encode --input $filePath$.The utility command is OS independent.For--input $filePath$, specify the path to the file for which the Base64-encoded string is required. The Base64-string of the file is written to the console.Sample command for the Barcode.svg image file:
sf modeler workspace utils base64encode --input ./Barcode.svg - Copy the Base64-encoded string into the <Image>.<default> tag.
-
Depending on the file format of the image you want to add, specify one of these in the
mimetype attribute:
Image Format Mimetype Value image.svg image/svg+xml image.png image/png - Save your changes and commit the image contract.
Example Barcode.image.xml image contract
<?xml version="1.0" encoding="utf-8"?><Image xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Barcode" schemaVersion="0.0.0.5"> <default mimetype="image/svg+xml">PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjJweCIgaGVpZ2h0PSIyN3B4IiB2aWV3Qm94PSIwIDAgMjIgMjciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+T3JkZXI8L3RpdGxlPgogICAgPGcgaWQ9IkxheW91dCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcga<!-- details skipped for brevity --> </default></Image>Did this article solve your issue?
Let us know so we can improve!
