1. Developing Modern Web Apps
Using CM WebClient and CM HSync

2. Developing Modern WebApps
CM WebClient is a mature product, but new features are being added all the time. In addition, APIs allow your application to interface with the newest devices and services.
See how you can modernize your business.

3. Speakers Andrew Leggett Senior Application Consultant Lily Taharudin

4. Developing Modern Web Apps
CM WebClient Features
Publishing RESTful APIs with CM HSync
Chat-bot Demo

5. CM WebClient Features Over 10 years old Mature and stable
Dozens of enhancements and fixes added per year
Lily Taharudin
Eric Giron
Abram Darnutzer
Andrew Leggett
Sodisa Support Team
Features you may not be aware of

6. CM WebClient Features Multi-Session Servlet
Upload / Drag & Drop Upload
Fixed Positioning
Image Grid
Custom Grid
Frozen columns
Control Classes
Charts
Rich tooltips
Event Calendar
Grid import and export

7. Multi-Session Servlet
Concurrent Sessions within same browser tab, or separate browser tabs
Shared global memory between sessions
Custom page template displays sessions under closeable tabs
Configured through web.xml

8. Uploading Files Upload any file type
Supports multiple uploads per panel
Drag & Drop upload template can be applied to an Edit control
Requires separate upload servlet

9. Uploading Files – Online Guide

10. Fixed Positioning
Supports FixedLeft, FixedRight, FixedTop, FixedBottom for all controls
Enable in WebClient.properties
Define.FixedPositioning=Y
Disabled by default

11. Fixed Positioning

12. Image Grid Specify columns in a grid to display as images
Image filename from column data, e.g. “image.jpg”
ImageColGridp:Grid1P.ColumnsArea:template=WebImageGrid:Image
Fully functional events and processing

13. Image Grid – Online Guide

14. Custom Grid Specify HTML template with placeholders for column data
e.g. <div><img src=“{0}”</img>{1}<br>{2}</div>
Control name
Grid1P:MainArea:template=WebCustomGrid:tplGenerator=CustomGrid:class=CustomGrid:default
Fully functional events and processing

15. Frozen Columns Frozen columns do not scroll horizontally
Specify number of columns to be ‘frozen’
Grid1P:frozenColumns=1:default

16. Frozen Columns – Online Guide

17. Control Classes Every control can be assigned a CSS class name
Control name parameter ‘class’
Btn3:class=BlueButton:default
Corresponds to CSS class

18. Charts Based on Grid templates First column is Description
Second Column is the Value
Supported chart types:
pie, donut, line, bar and spline
Specify chart in control name
Chart1P:MainArea:template=Chart:chartType=donut:default

19. Charts – Online Guide

20. Rich Tooltips Provide HTML tooltips for individual fields
Activated when mouse pointer hovers over control
Formatted with Message object HTML and parameters
Source control
PersonNme:MainArea:tooltipfields=Hint2:showdelay=200:default
Target control
Hint2

21. Events Calendar Outlook style Events Calendar
View by Day, Week, Work Week, Month, 6 Month

22. Events Calendar – Online Guide

23. Export & Import Excel Export the grid to a CSV file
Import the grid from a CSV files
Headers must be first row
Headers must match column heading

24. CM WebClient – Online Guide
Manuals, Guides and Hints to help with WebClient development

25. Publishing RESTful APIs with CM HSync
Working with external applications

26. APIs Expand your applications
Interface with external systems – input & output
Expand services to new platforms/devices
Innovate without major changes
Allow for automation

27. RESTful APIs Simplified APIs in concept and execution
Uses HTTP protocol
Access resources as unique URLs
HTTP verbs allow different actions
POST, GET, PUT, DELETE
Create, Retrieve, Update, Delete
Simple to consume

28. API Request example

29. CM HSync Generates API servlet for Plex entities
Calls Plex functions on request
Can specify operations, parameters and returned attributes
Generates documentation

30. CM HSync Web Server Plex Java REST Servlet Client
Retrieve
Create
Update
Delete
Plex Java
Plex Server Functions
REST Servlet
Client
GET
POST
PUT
DELETE
Web Server

31. Workshop Scenario “VHS by Mail” VHS Rental Store Plex application
Looking to modernize business
Web application
Integrate with external delivery app
Integrate with voice assistant

32. Workshop Delivery Application
Scenario
JavaScript Delivery application needs addresses of customers
Solution
Using HSYNC, make the Customer entity available for retrieval

33. Workshop Delivery Application

34. Amazon Alexa Demo Scenario Solution
Provide wider access to services by utilizing a voice assistant
Solution
Create Alexa Skill
Utilize OMDB API (Open Movie Database)
Using Plex & HSync, create CheckOut entity and API

35. Amazon Alexa Demo AWS Lambda - NodeJS Alexa Developer Console
CA Plex Action Diagram

36. Amazon Alexa Demo Request Response “Open VHS Store”
“Tell me about Ghostbusters”
“Can I rent that?”
“Please may I rent Alien?”
“Can I rent the movie Beetlejuice?”
“What’s in my cart?”
“I’d like to check-out”
“Good-bye”
Alexa opens skill session
OMDB API “Plot” property
HSync API – Instance not found
HSync API – Found & available
Alexa skill session response
HSync API – Check-out movie
Alexa closes skill session

37. Contact andrew.leggett@cmfirstgroup.com
cmfirstgroup.com

39. Double List