<menu path> <link to F1 content>
<intro text>Let us go through the process of copying an existing HTML5 screen.
| 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!
Copying an application
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.
Search for a module. (In our video example, we used Bin Transfer).
The copy icon will be visible in the top right-hand corner of the screen.
Select the copy icon.
Rename the copied field to your preferred name by entering a new name in the Form Name field.
Select the Copy Form button.
| Info |
|---|
Note: On the left-hand side of the screen, you also have the option to create a new Blank Form. |
A pop-up will indicate that the new form has been saved.
At the bottom of the screen, within the Footer, you will also find a Custom Menu. This is where you will access all your customized application screens.
| Info |
|---|
Note: It might take a couple of seconds before the custom application will appear in the Custom Menu |
Select the new copied form from the Custom menu. You will notice the new form is an exact replica of the copied screen.
The only difference is the icons in the top right-hand corner. An additional Saved and Edit icon has appeared.
Close the copied form, and on the main HTML5 screen where all the Application Tiles are listed, browse to the bottom. All custom forms will be visible at the bottom of the list.
Custom HTML5 screens will, therefore, be visible at the bottom of all the Application Tiles and within the Custom Menu in the Footer.
Select the Edit icon in the top right-hand corner to start editing the screen.
Editing an application
On your copied version of the HTML5 screen, i.e., My Custom Bin to Bin Transfer, select the Edit icon.
A small menu will open with two options: 1) Page and 2) Layout.
Under the first menu item, Page, you will find the following options:
o New Page – This will create a brand new, blank HTML5 page.
o Delete Page – This will delete an HTML5 page.
o Design Mode – You will switch the screen to design mode, where you will do most of your customization.
o Page Script – This will allow you to change the JavaScript on the page.
o Page Markup – This will allow you to change the HTML5 on the page.
o Save – This will Save all your changes.
To start customizing, select the Design Mode option. For more detailed information, refer to the HTML5 Scripting user guide.
Notice the page will change slightly with more visible columns and rows.
Once you are in Design Mode, you can start by adding additional layout changes. Select the 2nd option on the Edit menu, Layout.
The second menu item has the following options:
o Add Row 100%
o Add Row 50-50
o Add Row 33-33-33
o Add Row 25-25-25-25
o Add Row 8-92
o Add Row 16-84
This allows you to add additional rows to the layout. You can add one row across the page, the Add Row 100% option, or split the row into different columns, the Add Row 50-50, or other options.
The new row will then be added to the top of the screen.
| Info |
|---|
Note: If you move your mouse around over the screen, you will notice all the components will be highlighted in blue as you move over them. This is an indication that they can be edited. |
After inserting a new row, you can right-click on it and apply further changes.
Notice when selecting Add, there are a couple of options as well. These components can be added within the selected row.
You can also continue to update the Labels of some of the other rows by just selecting them and editing the text.
Once completed, select the Save Icon to save the changes to the form.
For more detailed information on customizing the HTML screens, refer to the HTML5 Scripting user guide.