<menu path> <link to F1 content>
None
This user guide will focus on page Scripting, specifically JavaScript and HTML, when customizing our HTML5 modules.
We would suggest that you first review the HTML5 Customization Overview user guide before starting with Scripting.
| Info |
|---|
If you don’t like reading, you can watch the video. |
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<link to YouTube video> <link to PDF doc on my OneDrive> |
Try it!
<content>Try it!
How does Scripting work?
HMTL5 pages have two Scripting elements: the logic part, typically done in JavaScript, and the HTML Markup, which defines how the screen will look.
To access and edit these two scripts, right-click the Edit icon in the top right-hand corner of your custom screen. The menu will open, and under Page / Page Script and Page Markup, you can edit these Scripting components.
Page Script Editor
The Page Script option allows you to edit the JavaScript component of the Scripting elements.
Page Markup Editor
The Page Markup option allows you to edit the HTML Markup and the JavaScript component.
When making changes to these Scripting components, you must ensure to save the changes. At the bottom of each page, there is an Update Page Markup button.
Editing an application
You should already have a copied version of an existing module. For more information, refer to the HTML5 Customization Overview user guide.
To open the copied HTML5 screen:
Open DATASCOPE WMS
On the Ribbon bar, select Launch HTML5 / Launch HTML5
The HTML5 application will open. This is the same screen an Operator will see when using a handheld scanner.
From the Search option, search for Custom Bin to Bin Transfer (this is the example we created in the previous user guide) and click to open the screen.
| Info |
|---|
Note: Custom applications will be visible in the Custom menu in the Footer or at the bottom of the Application Tiles. However, an easy way to find it is to use the Search. |
Your Custom module will open.
Simple Examples
Alert Messages
Let us start by adding a simple Alert Message within the JavaScript component.
Select the Edit icon in the top right-hand corner of the screen.
Browse to Page / Page Script
The JavaScript screen will open.
Add a simple alert message after the function.
Select the Update Page Markup button at the bottom of the screen to save the change.
Save the form as well by selecting the Save icon in the top right-hand corner.
Select the Reload icon to reload the page with the updated code.
The Hello World demo alert message will appear.
Existing Messages
As we advise users to start customizing the HTML5 screen by copying an existing screen, you also have the option to edit existing error messages that already form part of the JavaScript.
For example, if a user scan or enter a TrackID that is inactive, a message will pop up, but you can change that message to force the user to do something first, for example, a Cycle Count.
Start by copying the existing error message; this will allow you to easily find the message in the JavaScript code.
Select the Edit icon in the top right-hand corner of the screen.
Browse to Page / Page Script
The JavaScript screen will open.
Search for the error message you have copied.
Edit the error message to your preferred message.
Select the Update Page Markup button at the bottom of the screen to save the change.
Save the form as well by selecting the Save icon in the top right-hand corner.
Select the Reload icon to reload the page with the updated code.
The Existing Error message will be updated with the additional changes you made.
To add some useful Logic to the JavaScript code
| Tip |
|---|
Scenario: We are still working on the customized Bin Transfer module. Imagine you have two different TrackIDs, one being in a Receiving Bin and the other in a WIP bin. If you want to add a warning message stating that a TrackID is in a WIP bin, which is a Work in Progress Bin and cannot be transferred until completed. |
Select the Edit icon in the top right-hand corner of the screen.
Browse to Page / Page Script
The JavaScript screen will open.
Search for a Function where the pallet is validated.
It calls a TransferBin function, which populates the current bin textbox.
We can add some additional logic here.
Select the Update Page Markup button at the bottom of the screen to save the change.
Save the form as well by selecting the Save icon in the top right-hand corner.
Select the Reload icon to reload the page with the updated code.
If you redo the same transaction using a TrackID in a WIP bin, then you will get an error message.
| Info |
|---|
Note: Detailed knowledge of JavaScript is required to do these logic updates. |
Colours
Let us look at updating some HTML Markup to amend some colors on the screen.
Select the Edit icon in the top right-hand corner of the screen.
Browse to Page / Page Markup
The Markup screen will open.
Search for the Element or label you would like to amend.
You can amend the Label to display it in a different color by adding a style.
Select the Update Page Markup button at the bottom of the screen to save the change.
Save the form as well by selecting the Save icon in the top right-hand corner.
Select the Reload icon to reload the page with the updated code.
The Label you have selected will be updated to a red font.
The same principle will apply to font size.
For more detailed information on customizing the HTML screens, refer to the HTML5 Data and Logic user guide.