Going Mobile with Going Mobile with OpenEdge OpenEdge ® ® Basics Basics Paul Guggenheim Paul Guggenheim Paul Guggenheim & Paul Guggenheim & Associates Associates
Jan 13, 2016
Going Mobile with Going Mobile with OpenEdgeOpenEdge®® BasicsBasics
Paul GuggenheimPaul Guggenheim
Paul Guggenheim & AssociatesPaul Guggenheim & Associates
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
2
About PGAAbout PGA Working in Progress since 1984 and training Progress programmers Working in Progress since 1984 and training Progress programmers
since 1986since 1986 Designed seven comprehensive Progress courses covering all levels of Designed seven comprehensive Progress courses covering all levels of
expertise including - The Keys to OpenEdge® expertise including - The Keys to OpenEdge® Author of the Sharp Menu System, a database driven, GUI pull-down Author of the Sharp Menu System, a database driven, GUI pull-down
menu system.menu system. White Star White Star Software Strategic PartnerSoftware Strategic Partner TailorProTailorPro Consultant and Reseller Consultant and Reseller AppPro AppPro PartnerPartner Major consulting clients include Chicago Metal Rolled Products, Eastern Major consulting clients include Chicago Metal Rolled Products, Eastern
Municipal Water District, Eaton Corporation, Foxwoods Casino, JP Municipal Water District, Eaton Corporation, Foxwoods Casino, JP Morgan Chase, Montana Metal Products, National Safety Council and Morgan Chase, Montana Metal Products, National Safety Council and Stanley Tools Works.Stanley Tools Works.
Head of the Chicago Area Progress Users GroupHead of the Chicago Area Progress Users Group PUG Challenge Executive Committee MemberPUG Challenge Executive Committee Member
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
OverviewOverview OpenEdge Mobile ComponentsOpenEdge Mobile Components
Runtime ArchitectureRuntime Architecture Development EnvironmentDevelopment Environment
Create a Mobile OpenEdge ProjectCreate a Mobile OpenEdge Project Create a Business EntityCreate a Business Entity Create Mobile ApplicationCreate Mobile Application
Adding JSDO ServicesAdding JSDO Services Adding Mobile UI ComponentsAdding Mobile UI Components Adding EventsAdding Events Mapping DataMapping Data
DemonstrationDemonstration SearchSearch CRUD FunctionsCRUD Functions
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
OpenEdge Mobile ComponentsOpenEdge Mobile Components
Runtime ArchitechtureRuntime Architechture
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
OpenEdge Mobile ComponentsOpenEdge Mobile Components
Development EnvironmentDevelopment Environment
AppServer
Business Entity.cls and .r files
Services(Class methods)
WebServer
Tomcat
.war, .xml, .js, .jar,
.html, .css files
Mobile DeviceMobile Web Application
Web Browser or Native
OpenEdge JSDOHTML5 and JS
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create a Mobile OpenEdge ProjectCreate a Mobile OpenEdge Project
Select Project Type as MobileSelect Project Type as Mobile
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create a Mobile OpenEdge ProjectCreate a Mobile OpenEdge Project
Select AppServerSelect AppServer
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create a Mobile OpenEdge ProjectCreate a Mobile OpenEdge Project
Select a Mobile Service InstanceSelect a Mobile Service Instance
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create a Mobile OpenEdge ProjectCreate a Mobile OpenEdge Project
Create a Mobile AppCreate a Mobile App
““App” added to the end of the project nameApp” added to the end of the project name
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create a Mobile OpenEdge ProjectCreate a Mobile OpenEdge Project Skip over the Propath screenSkip over the Propath screen
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create a Mobile OpenEdge ProjectCreate a Mobile OpenEdge Project Select the desired source for database Select the desired source for database
connections.connections.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create a Mobile OpenEdge ProjectCreate a Mobile OpenEdge Project Take the defaults for static web content.Take the defaults for static web content.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Mobile Project UpdatingMobile Project Updating
At the start of the project and when major At the start of the project and when major changes are made to the front end mobile changes are made to the front end mobile application, publish restmgr1.application, publish restmgr1.
Publishing restmgr1 can be time consuming, Publishing restmgr1 can be time consuming, especially if you have created multiple projects.especially if you have created multiple projects.
This creates/updates the .war files and This creates/updates the .war files and subdirectories related to the project located in subdirectories related to the project located in the %dlc%\servers\tomcat\webapps directory.the %dlc%\servers\tomcat\webapps directory.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Mobile Project UpdatingMobile Project Updating
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Mobile Project UpdatingMobile Project Updating
When finished making changes to When finished making changes to business logic on the back end, then business logic on the back end, then start/restart restbroker1.start/restart restbroker1.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create a Business EntityCreate a Business Entity
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create a Business EntityCreate a Business Entity
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Connect BE to Mobile ServiceConnect BE to Mobile Service
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Populate Read MethodPopulate Read Method Insert code below in readdsGMCustomer:Insert code below in readdsGMCustomer:
DEFINE DATA-SOURCE srcCustomer FOR Customer.DEFINE DATA-SOURCE srcCustomer FOR Customer.
BUFFER eCustomer:ATTACH-DATA-SOURCE(DATA-SOURCE BUFFER eCustomer:ATTACH-DATA-SOURCE(DATA-SOURCE srcCustomer:HANDLE).srcCustomer:HANDLE).
BUFFER eCustomer:HANDLE:BATCH-SIZE = 10.BUFFER eCustomer:HANDLE:BATCH-SIZE = 10.
DATASET dsCustomer:FILL().DATASET dsCustomer:FILL().
BUFFER eCustomer:DETACH-DATA-SOURCE().BUFFER eCustomer:DETACH-DATA-SOURCE().
dataset dsCustomer:write-jsondataset dsCustomer:write-json ('file', './dsGMCustomer.json', yes).('file', './dsGMCustomer.json', yes).
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create Mobile ApplicationCreate Mobile Application From the browser select the home pageFrom the browser select the home page
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create Mobile ApplicationCreate Mobile Application Click on Caption, then enter textClick on Caption, then enter text
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create Mobile ApplicationCreate Mobile Application Drag List control into body below captionDrag List control into body below caption
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create Mobile ApplicationCreate Mobile Application The list control is similar to a OE UI Browse.The list control is similar to a OE UI Browse. Set the items in list to 1 (rows per record).Set the items in list to 1 (rows per record). Name list CustListName list CustList Name Item CustItemName Item CustItem Add grid to list (sets the number of columns and Add grid to list (sets the number of columns and
rows). rows). Set to 3 columns and 1 row.Set to 3 columns and 1 row.
Add label to each grid cell (column in browse).Add label to each grid cell (column in browse). Name labels, CustNum, CustName and Phone.Name labels, CustNum, CustName and Phone.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create Mobile ApplicationCreate Mobile Application
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Adding JSDO Service to Client Adding JSDO Service to Client The JavaScript Data Object (JSDO) The JavaScript Data Object (JSDO)
provides access to ABL data to the Mobile provides access to ABL data to the Mobile Client. Client.
The JSDO service is selected for the The JSDO service is selected for the project containing 7 individual services to project containing 7 individual services to be used by a particular screen.be used by a particular screen.
The Customer Settings service must be The Customer Settings service must be setup first.setup first.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Adding JSDO Service to ClientAdding JSDO Service to Client Select Create a New Service, then upload Select Create a New Service, then upload
a file.a file.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Adding JSDO Service to ClientAdding JSDO Service to Client Select the JSON file to upload from the Select the JSON file to upload from the
Webcontent subdirectory, then click Select Webcontent subdirectory, then click Select Resouces, then Create Services.Resouces, then Create Services.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Adding JSDO Service to ClientAdding JSDO Service to Client The JSDO creates 7 services:The JSDO creates 7 services:
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Setting the Catalog and ServiceURISetting the Catalog and ServiceURI In order for the OE Mobile app to reach In order for the OE Mobile app to reach
the development web server, change the the development web server, change the catalogURI and serviceURI:catalogURI and serviceURI:
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Setting the Catalog and ServiceURISetting the Catalog and ServiceURI
catalogURI:catalogURI:
http://pgavos2:8980/GoingMobileService/stahttp://pgavos2:8980/GoingMobileService/static/mobile/GoingMobileService.jsontic/mobile/GoingMobileService.json serviceURI:serviceURI:
http://pgavos2:8980/GoingMobileServicehttp://pgavos2:8980/GoingMobileService
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Add DataSource to Home ScreenAdd DataSource to Home Screen
Select Data Tab on Home ScreenSelect Data Tab on Home Screen Select JSDO Service, click AddSelect JSDO Service, click Add
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Add DataSource to Home ScreenAdd DataSource to Home Screen Change “restservice1” name to a more Change “restservice1” name to a more
meaningful “Customer”.meaningful “Customer”.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Adding EventsAdding Events Each UI object in OE Mobile can be Each UI object in OE Mobile can be
instructed to execute various actions instructed to execute various actions based upon a particular event.based upon a particular event.
Here are some event types:Here are some event types: Load, Page Show, Page Hide, Click, Focus, Load, Page Show, Page Hide, Click, Focus,
Input and ValueChangeInput and ValueChange Actions may take various forms:Actions may take various forms:
Set property, Navigate to Page, Invoke Set property, Navigate to Page, Invoke Service, Run JavaScriptService, Run JavaScript
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Adding EventsAdding Events In order to use the JSDO classes, an In order to use the JSDO classes, an
OpenEdge Data Session instance must be OpenEdge Data Session instance must be created. created.
Once created, the catalog json file may be Once created, the catalog json file may be referenced in the session.referenced in the session.
It is necessary to add some JavaScript It is necessary to add some JavaScript code to the Load of the Home screen to code to the Load of the Home screen to instantiate the session and add the instantiate the session and add the catalog.catalog.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Adding EventsAdding Events
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Adding EventsAdding Events
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Adding EventsAdding Events Invoke service “Customer” as second Invoke service “Customer” as second
action on Load of Home Screenaction on Load of Home Screen
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Let’s Test IT!Let’s Test IT! If typed incorrectly, you may receive the If typed incorrectly, you may receive the
following:following:
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Let’s Test IT!Let’s Test IT!
Look ma, Look ma, no data.no data.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Let’s Load DataLet’s Load Data
Three Steps:Three Steps:
1.1. Add datasource Read service to home Add datasource Read service to home screen.screen.
2.2. Map Data to UI Elements.Map Data to UI Elements.
3.3. Perform read service on page show Perform read service on page show event.event.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Add Read Service to Home ScreenAdd Read Service to Home Screen
Change Name to ReadChange Name to Read
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Edit MappingEdit Mapping Edit Mapping for Read ServiceEdit Mapping for Read Service
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Put Read Service on Page ShowPut Read Service on Page Show
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Let’s Test IT!Let’s Test IT!
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Search by NameSearch by Name Add input field and search buttonAdd input field and search button Change the Read Request mappingChange the Read Request mapping
Set local storage variable cnum2Set local storage variable cnum2 Set cnum2 to “ ” on initial valueSet cnum2 to “ ” on initial value
Change readdsGMCustomer methodChange readdsGMCustomer method On click of the searchbutton:On click of the searchbutton:
Store input data in a localStorage variableStore input data in a localStorage variable Invoke the read serviceInvoke the read service
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Search by NameSearch by Name Add grid above custlist for formatting the Add grid above custlist for formatting the
input field and search button.input field and search button. Set rows to 1Set rows to 1
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Search by NameSearch by Name Drag the input field control into the left grid Drag the input field control into the left grid
cell and call it begname.cell and call it begname. Drag button control into the right grid cell Drag button control into the right grid cell
and call it buttonsearch.and call it buttonsearch.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create LocalStorage VariableCreate LocalStorage Variable On Load of the Home screen set local On Load of the Home screen set local
storage variable cnum2.storage variable cnum2.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Change Read Request MappingChange Read Request Mapping Map localStorage variable cnum2 to filter.Map localStorage variable cnum2 to filter.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Change read methodChange read method A query qcust is added for the customer record.A query qcust is added for the customer record. Conditional logic on the filter value is added.Conditional logic on the filter value is added.
define query qcust for Customer scrolling.define query qcust for Customer scrolling.DEFINE DATA-SOURCE srcCustomer FOR query qcust Customer DEFINE DATA-SOURCE srcCustomer FOR query qcust Customer
keys (custnum).keys (custnum).
if filter = “ ” thenif filter = “ ” thenquery qcust:QUERY-PREPARE ("for each customer query qcust:QUERY-PREPARE ("for each customer no-lock where name begins 'a' " ).no-lock where name begins 'a' " ).elseelsequery qcust:QUERY-PREPARE ("for each customer query qcust:QUERY-PREPARE ("for each customer no-lock where name begins '" + filter + "' " ).no-lock where name begins '" + filter + "' " ).
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Store in LocalStorage VariableStore in LocalStorage Variable Add event Click on buttonsearch to run Add event Click on buttonsearch to run
JavaScript.JavaScript.
var vbegname = Tiggr(‘begname’).val();var vbegname = Tiggr(‘begname’).val();
alert(‘begname: ‘ + vbegname);alert(‘begname: ‘ + vbegname);
localStorage.setItem(‘cnum2’, vbegname);localStorage.setItem(‘cnum2’, vbegname);
alert(loaclStorage.getItem(‘cnum2’));alert(loaclStorage.getItem(‘cnum2’));
Documentation:Documentation:
Getting Started with HTML5 Local Storage:Getting Started with HTML5 Local Storage:http://blog.appery.io/2011/09/getting-started-with-html5-local-storage/http://blog.appery.io/2011/09/getting-started-with-html5-local-storage/
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Search by NameSearch by Name Problem:Problem:
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Search by NameSearch by Name Sorting is done on the client side not the server side in Sorting is done on the client side not the server side in
OpenEdgeOpenEdge Need to sort in the JSDO when it succeeds.Need to sort in the JSDO when it succeeds.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Search by NameSearch by Name
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Update CustomerUpdate Customer Create a detail screen for updating name and Create a detail screen for updating name and
phone with update button and back button.phone with update button and back button. Perform actions on the click of CustItem, the Item Perform actions on the click of CustItem, the Item
of the List.of the List. Add read service to detail screen and map.Add read service to detail screen and map. Add update service to detail screen and map.Add update service to detail screen and map. Perform actions click of update button.Perform actions click of update button. Modify logic for the read customer method.Modify logic for the read customer method. Add logic for the update customer method.Add logic for the update customer method.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create Detail ScreenCreate Detail Screen Create New Page:Create New Page:
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Create Detail ScreenCreate Detail Screen Add two input fields for name and phone.Add two input fields for name and phone. Add update button.Add update button.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
CustItem ActionsCustItem Actions On the home page, set local storage On the home page, set local storage
variable cnum and bind it to CustNum.variable cnum and bind it to CustNum. Navigate to page Detail.Navigate to page Detail.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Map Read Service on Detail ScreenMap Read Service on Detail Screen
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Map Read Service on Detail ScreenMap Read Service on Detail Screen
Invoke read service on detail screen page Invoke read service on detail screen page show.show.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Map Update Service on Detail ScreenMap Update Service on Detail Screen
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Add Update Button ActionsAdd Update Button Actions Invoke the update service.Invoke the update service. Navigate to the home screen.Navigate to the home screen.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Modify Read LogicModify Read Logic The filter will now have a dual purpose. It The filter will now have a dual purpose. It
needs to get the one customer for update needs to get the one customer for update in addition to searching by name. in addition to searching by name.
The filter will be comma delimited list with The filter will be comma delimited list with the first value being customer number and the first value being customer number and the second value being a name begins the second value being a name begins string.string.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Modify Read LogicModify Read Logic On the OpenEdge Mobile side, the search On the OpenEdge Mobile side, the search
button JavaScript logic is changed to:button JavaScript logic is changed to:
localStorage.setItem('cnum2', ',' + vbegname);localStorage.setItem('cnum2', ',' + vbegname);
Set localStorage on Load of home screen Set localStorage on Load of home screen for cnum2 is changed from “a” to “,a”.for cnum2 is changed from “a” to “,a”.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Modify Read LogicModify Read Logic On the business logic server side:On the business logic server side:
if num-entries(filter) = 1 thenif num-entries(filter) = 1 then
query qcust:QUERY-PREPARE ("for each customer no-lock query qcust:QUERY-PREPARE ("for each customer no-lock
where custnum = " + filter ).where custnum = " + filter ).
else else
query qcust:QUERY-PREPARE ("for each customer no-lock query qcust:QUERY-PREPARE ("for each customer no-lock
where name begins '" + entry(2,filter) + "'" ).where name begins '" + entry(2,filter) + "'" ).
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Add Update LogicAdd Update Logic Even though we are only updating one record, a Even though we are only updating one record, a
for each on the ecustomer table is performed in for each on the ecustomer table is performed in case this logic is used in other Mobile programs.case this logic is used in other Mobile programs.
for each eCustomer:for each eCustomer:
find Customer exclusive-lockfind Customer exclusive-lock
where Customer.CustNum = eCustomer.CustNumwhere Customer.CustNum = eCustomer.CustNum
no-error.no-error.
if available Customer thenif available Customer then
buffer-copy eCustomer to Customer no-error.buffer-copy eCustomer to Customer no-error.
end. /* for each eCustomer */end. /* for each eCustomer */
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Add New CustomerAdd New Customer Place add button on home screen.Place add button on home screen. Change update service response map to Change update service response map to
transfer sequence generated custnum.transfer sequence generated custnum. Add event for add button to set cnum = 0.Add event for add button to set cnum = 0. Change button text on detail screen to add.Change button text on detail screen to add. Modify read method in business entity to create Modify read method in business entity to create
empty ecustomer temp-table record.empty ecustomer temp-table record. Modify update method to include add logic.Modify update method to include add logic.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Add New CustomerAdd New Customer
Place add button on home screen.Place add button on home screen.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Add New CustomerAdd New Customer Change detail screen update service Change detail screen update service
response map to transfer sequence response map to transfer sequence generated custnum.generated custnum.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Add New CustomerAdd New Customer Add event for add button to set cnum = 0.Add event for add button to set cnum = 0. Add event to navigate to detail screen.Add event to navigate to detail screen.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Add New CustomerAdd New Customer Change button text on detail screen to add.Change button text on detail screen to add. Place in front of read2 service.Place in front of read2 service.var vcnum;var vcnum;
vcnum = localStorage.getItem('cnum');vcnum = localStorage.getItem('cnum');
if (vcnum == 0) Tiggzi('buttonupdate').text('Add'); if (vcnum == 0) Tiggzi('buttonupdate').text('Add'); else Tiggzi('buttonupdate').text('Update');else Tiggzi('buttonupdate').text('Update');
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Add New CustomerAdd New Customer Create empty ecustomer temp-table record.Create empty ecustomer temp-table record. Required for mapping.Required for mapping.
if filter = "0" then create ecustomer.if filter = "0" then create ecustomer.else do:else do: if num-entries(filter) = 1 if num-entries(filter) = 1 or entry(2,filter) = "" thenor entry(2,filter) = "" then query qcust:QUERY-PREPARE ("for each customer no-lock query qcust:QUERY-PREPARE ("for each customer no-lock
where custnum = " + filter ).where custnum = " + filter ). else else query qcust:QUERY-PREPARE ("for each customer no-lock query qcust:QUERY-PREPARE ("for each customer no-lock
where name begins '" + entry(2,filter) + "'" ).where name begins '" + entry(2,filter) + "'" ). DATASET dsCustomer:FILL().DATASET dsCustomer:FILL(). BUFFER eCustomer:DETACH-DATA-SOURCE().BUFFER eCustomer:DETACH-DATA-SOURCE().end. /* filter ne '0' */end. /* filter ne '0' */
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Add New CustomerAdd New Customer Modify update method to include add logic.Modify update method to include add logic.
for each eCustomer:for each eCustomer: find Customer exclusive-lock find Customer exclusive-lock where Customer.CustNum eq eCustomer.CustNumwhere Customer.CustNum eq eCustomer.CustNum no-error.no-error. if available Customer thenif available Customer then buffer-copy eCustomer to Customer no-error.buffer-copy eCustomer to Customer no-error. else if ecustomer.custnum = 0 then do:else if ecustomer.custnum = 0 then do: create Customer.create Customer. buffer-copy ecustomer except custnum to Customer.buffer-copy ecustomer except custnum to Customer. assign ecustomer.custnum = Customer.CustNum.assign ecustomer.custnum = Customer.CustNum. end. /* ecustomer.custnum = 0 */end. /* ecustomer.custnum = 0 */end.end.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Deleting a CustomerDeleting a Customer Add Delete service and field mapping to Add Delete service and field mapping to
Detail screen.Detail screen. Add Delete Button to Detail screen.Add Delete Button to Detail screen. Add Delete click event to invoke delete Add Delete click event to invoke delete
service.service. Add Delete click event to navigate to home Add Delete click event to navigate to home
screen.screen. Add logic to delete method.Add logic to delete method.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Deleting a CustomerDeleting a Customer Add Delete service to Detail screen.Add Delete service to Detail screen.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Deleting a CustomerDeleting a Customer Add Delete field mapping to Detail screen.Add Delete field mapping to Detail screen.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Deleting a CustomerDeleting a Customer Add Delete Button to Detail screen.Add Delete Button to Detail screen.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Deleting a CustomerDeleting a Customer Add Delete click events to invoke delete Add Delete click events to invoke delete
service and navigate to home screen.service and navigate to home screen.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
Deleting a CustomerDeleting a Customer Add logic to delete method.Add logic to delete method.
find first ecustomer.find first ecustomer.find Customer exclusive-lockfind Customer exclusive-lock where Customer.CustNum eq eCustomer.CustNumwhere Customer.CustNum eq eCustomer.CustNumno-error.no-error.if available Customer then do:if available Customer then do: /* check if customer actually deleted or delete /* check if customer actually deleted or delete
trigger caused it to be backed out */ trigger caused it to be backed out */ delete Customer no-error.delete Customer no-error. if not error-status:error then delete ecustomer.if not error-status:error then delete ecustomer.end. /* available customer */end. /* available customer */
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
SummarySummary OpenEdge Mobile provides the ability to OpenEdge Mobile provides the ability to
search, add, modify and delete records on search, add, modify and delete records on any mobile device.any mobile device.
There are many steps in the process. There are many steps in the process. Adding Data ServicesAdding Data Services Performing data mapping for both requests Performing data mapping for both requests
and responses.and responses. Add the appropriate event in the right Add the appropriate event in the right
sequence.sequence.
PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013
Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics
QuestionsQuestions