<menu path> <link to F1 content>
None
This document addresses the data and logic elements of HTML5 customization. It is designed for people familiar with JavaScript programming and object-oriented programming concepts. You should also be familiar with HTML Markup customization.
Before you start with this user guide, you can go over the HTML5 Customization Scriptinguser guide.
| 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!
Components of HTML5 applications
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.
JavaScript component
The Page Script option allows you to edit the JavaScript component of the Scripting elements.
HTML Component
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.
Architecture and Flow
When a user opens an HTML module, the HTML5 Application on the client side sends an HTTP Request message to the DATASCOPE Web component on the server, which does a query to the DATASCOPE WMS database, fetching the data and the JavaScript for the specific HTML5 screen and responds back via an HTTP Responds to the client, which constructs the HTML5 application screen by using HTML5 Markup and JavaScript logic.
The HTML5 Markup is how the screen looks, and the JavaScript applies the logic to the screen.
When the user enters a Job Number or TrackID some validation needs to happen to ensure that the number is correct and does exist in DATASCOPE WMS and SYSPRO. The HTML Application will make a request via the JavaScript logic to the server-side DATASCOPE WebAPI, which will do a call to the DATASCOPE WMS and SYSPRO databases, which will return the data back to JavaScript on the client-side, where the data will be validated and displayed in the HTML5 application screen or a relevant message if validation was unsuccessful.
Users can also fetch custom data via the DATASCOPE WebAPI from the HTML5 Application’s JavaScript Logic. The DATASCOPE WebAPI is opened by using a specific call with a specific class. The class ApiCustomData() allows you to make a call to a stored procedure and pass in some parameters. The user can use that information to make some decisions on the data that has been returned.
This method does not allow us to put any SQL or string within the JavaScript logic, but the API class will enable us to do those kinds of requests securely and still get data returned from the DATASCOPE WMS, SYSPRO, or even custom databases.
Custom Data Requests
Here, we will discuss how to fetch data from the SQL database using our DATASCOPE WebAPI, apply logic, and display it on the 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.
Search for a module. (In our video example, we used Customer Returns).
Our standard Customer Return screen will open.
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.
Select Ok to save the new 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 Menu. This is where you will access all your customized application screens.
Design the new screen.
Before you can update the logic in the screen, you must first update the look and feel of the screen.
Select the Edit icon in the top right-hand corner of the screen.
Switch to Design Mode and select Layout.
Add a Standard Row layout. The Standard Row layout matches the existing layout with the first column being the label and the second column being the captured field.
Move the newly added rows down to their appropriate locations. One under the Customer Code for the Customer Name, and the other under the Stock Code/Barcode for the Long Description.
Add Labels to the left-hand side columns. Right-click on the column and select Add Label.
Add Labels to the right-hand side column as well. This is because, in our example nothing will be entered, and only text will be displayed.
Once the Labels have been added, you can update the text.
Do not update the text for the right-hand side labels, as we will use the generic names to easily find them within the JavaScript code to start adding the logic to them.
Exist Design Mode.
Update the Markup
Next, we must update the Markup.
Right-click on the Edit icon and select Page / Page Markup
Scroll down or Search for the HTML elements. You must find the Label 5 and Label 6 elements within the Markup.
Remove the words Label 5 and Label 6, as we do not want to see any text in those fields when the screen loads.
Next, these Label IDs must be given proper names.
Update label id=”dsControlCount_label5” to custom_CustomerName and label id=”dsControlCount_label6” to custom_LongDescription.
When we start to update the JavaScript Logic these two unique names must be referenced.
You can remain in the Page Markup screen, as the JavaScript code is also visible on this screen.
Locate the element where the Operator must enter the Customer Code.
| Info |
|---|
Note: Each function has a logical name. |
In this example, as we add a Customer Name, we will work with the txtCustCode_LostFocus function.
The Customer Name code will be entered after the if statement.
Start by instantiating the Custom Data object.
Next, we must make a call to the stored procedure. This call will give us some data back.
A stored procedure must be created on the DATASCOPE WMS Server to go and fetch the Customer Name based on the Customer Code.
Copy the name from the Procedure, CUSTOM_Fetch_CustomerName
Add that as the first parameter in the call to the stored procedure and then add the parameter to the customer code.
The parameter list is unlimited, so you can add as many as you need.
Lastly, you need to update the label with the results of the call to the stored procedure.
Select Update Page Markup to save your changes.
The same process must be followed to add the Long Description under the Stock Code/Barcode field.
| Info |
|---|
Note: If you test your logic, you must always remember to refresh your screen so that the Markup is clean, and you don’t work or edit an updated screen with data in it. Once a screen is loaded with a Customer Code or TrackID data, that data sits within the Markup. |
Right-click on the Edit icon and select Page / Page Markup again.
Locate the element where the Stock Code is loaded.
In this example, as we add a Long Description, we will work with the txtStockCode_LostFocus function.
The Long Description code will be entered after the if statement.
Start by instantiating the Custom Data object.
Next, we must make a call to the stored procedure. This call will give us some data back.
A stored procedure must be created on the DATASCOPE WMS Server to go and fetch the Long Description based on the Stock Code.
Copy the name from the Procedure, CUSTOM_Fetch_LongDescription
Add that as the first parameter in the call to the stored procedure and then add the parameter to the customer code.
Lastly, you need to update the label with the results of the call to the stored procedure.
Next, you can test your new HTML screen to see if the required data is returned.
