Inspection HTML Content and Images
As of Support Pack 7 the use of HTML content for Inspections and Inspection Questions was introduced. This allows the configuration of more contextual information and instructions to be provided to end users. This functionality also allows for the inclusion of image content.
General Explanation
BlueWorx uniquely identifies each image and only downloads it to the device once per image. So if you had 10 Work Orders, all with the same Inspection and Questions, and one of the Questions contained an image, then only one image will move between SAP and the device.
In the same scenario as above, if half way through processing the inspections the administrator changed the inspection image related to the 5 un-started inspections, then a new image for that question would go to the device.
The quality of the images, which relates to its size, is determined by an BlueWorx Administration setting. See Administration Settings Tab > Inspections for details on this.
The content, including images, can be maintained for multiple languages.
Limitations of Use
While the html content and images will work in the Inspection viewer, it won't work in the sample SAP Smart Forms. That's because SAP Smart Forms do not support the use of html content nor dynamic image content.
Image Use Recommendations
- Restrict Image Use - Regardless of how well BlueWorx rationalises the amount of data being sync'd between SAP and devices, the use of images should be restricted to genuine requirements with due regards to the impact on device sync times and data volumes, and on SAP storage.
- Restrict Image Size - The size of an image file uploaded into the HTML Editor should not exceed 500KB per image. The recommended size for optimal performance is 200KB or lesser. We also recommend that no more than 10 images of this size should be saved in the editor. Note that viewing the source before the image has been re-sized (by saving) should be avoided as this loads the image content into the source area at full size. After saving the HTML text, the images will have been re-sized and the source should be viewable.
- Styling - The use Inline css styling, as is applied by the editor, is supported. The use of internal or external css styling is not recommended nor supported. It can induce errors and makes the changes apply to all elements on the page
- Think of the end users experience - Consider the end user experience relative to their device. For example, large and complex images, originally designed for use with a full size pdf page, may not provide a good UX on a phone sized device. Always test inspections using actual device form factors.
- Use Drag and Drop - Images have different sizes according to their format. If you copy an image in one format (say .jpg), then the application used to copy it can change the format to another format (eg. ".png"). As outlined in the section above, BlueWorx will work to try and reduce the image size on saving, and convert it back from to .jpg, but that conversion may not result in an image as small as the original image. For that reason we recommend uploading files in the HTML Editor using drag and drop as opposed to the cut or snip and paste methods.
HTML Sanitization
Due to the security risks involved with letting users write HTML, BlueWorx now uses DOMPurify to sanitize all html content.
DOMPurify is the recommended sanitizer by the Open WorldWide Application Security Project (OWASP). The sanitization will remove any html tags or attributes that could be used maliciously (e.g. scripts, onclick etc...). BlueWorx uses the default settings of DOMPurify for the Inspection Administration application. If a user wants to further customize what can and can't be included in the html editor, we recommend having a developer extend the sanitizeHTML.js file.
Examples
Inspection Header
Example text and image in Inspection Header:
Here's how it looks on test execution:
Inspection Question
Example text and image in Inspection Question:
And here's how it looks on test execution:
