Kendo UI Builder by ® Progress : ® Modernizing OpenEdge Applications Notices ©2016ProgressSoftwareCorporationand/oroneofitssubsidiariesoraffiliates.Allrightsreserved. ThesematerialsandallProgress®softwareproductsarecopyrightedandallrightsarereservedbyProgressSoftwareCorporation.Theinformationinthesematerialsissubject tochangewithoutnotice,andProgressSoftwareCorporationassumesnoresponsibilityforanyerrorsthatmayappeartherein.Thereferencesinthesematerialstospecific platformssupportedaresubjecttochange. BusinessMakingProgress,Corticon,DataDirect(anddesign),DataDirectCloud,DataDirectConnect,DataDirectConnect64,DataDirectXMLConverters,DataDirectXQuery, DeliverMoreThanExpected,Icenium,KendoUI,MakingSoftwareWorkTogether,NativeScript,OpenEdge,PoweredbyProgress,Progress,ProgressSoftwareDevelopers Network,Rollbase,RulesCloud,RulesWorld,SequeLink,Sitefinity(andDesign),SpeedScript,StylusStudio,TeamPulse,Telerik,Telerik(andDesign),TestStudio,and WebSpeedareregisteredtrademarksofProgressSoftwareCorporationoroneofitsaffiliatesorsubsidiariesintheU.S.and/orothercountries.AccelEvent,Analytics360, AppsAlive,AppServer,Arcade,BravePoint,BusinessEdge,DataDirectSpy,DataDirectSupportLink,DevCraft,DigitalFactory,Fiddler,FutureProof,HighPerformanceIntegration, JustCode,JustDecompile,JustMock,JustTrace,OpenAccess,ProDataSet,ProgressArcade,ProgressProfiles,ProgressResults,ProgressRFID,ProgressSoftware,ProVision, PSEPro,SectorAlliance,Sitefinity,SmartBrowser,SmartComponent,SmartDataBrowser,SmartDataObjects,SmartDataView,SmartDialog,SmartFolder,SmartFrame, SmartObjects,SmartPanel,SmartQuery,SmartViewer,SmartWindow,WebClient,WhoMakesProgress,andXervoaretrademarksorservicemarksofProgressSoftware Corporationand/oritssubsidiariesoraffiliatesintheU.S.andothercountries.JavaisaregisteredtrademarkofOracleand/oritsaffiliates.Anyothermarkscontainedherein maybetrademarksoftheirrespectiveowners. PleaserefertotheReleaseNotesapplicabletotheparticularProgressproductreleaseforanythird-partyacknowledgementsrequiredtobeprovidedinthedocumentation associatedwiththeProgressproduct. September2016 Lastupdatedwithnewcontent:Version1.0 KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0 3 Notices 4 KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0 Contents Table of Contents Chapter 1: Overview and Architecture.........................................................7 StepstomodernizeanOpenEdgeapplication........................................................................................7 Architecture and components.................................................................................................................9 Chapter 2: Kendo UI Designer Overview...................................................11 App layout and components.................................................................................................................12 Creating and designing an app.............................................................................................................14 Data providers and data sources..........................................................................................................19 Adding and editing a data provider............................................................................................20 Addingandeditingadatasource...............................................................................................22 Editor and semantic types..........................................................................................................25 Modules and views...............................................................................................................................30 Editing the login view.................................................................................................................31 AddingandeditingaData-Gridview..........................................................................................34 Adding and editing a Data-Grid-Formview................................................................................39 Adding and editing a Data-Grid-Separate-Form view................................................................46 App generation and deployment...........................................................................................................53 Chapter 3: Extension Points and Source Code Customization...............55 Static files..............................................................................................................................................56 Custom assets...........................................................................................................................57 HTML code.................................................................................................................................57 JavaScript code..........................................................................................................................57 Company logo.......................................................................................................................................58 Customize the view templates..............................................................................................................58 Customsemantictypes.........................................................................................................................59 OpenEdge Data Object Services...............................................................................................59 Kendo UI Builder........................................................................................................................59 Custom UI editor types.........................................................................................................................60 General view events.............................................................................................................................60 View-specificevents..............................................................................................................................62 CustomHTMLsections.........................................................................................................................64 Row templates......................................................................................................................................65 Row template format..................................................................................................................65 RowtemplateID.........................................................................................................................66 Rowtemplatefunction................................................................................................................66 Column templates.................................................................................................................................67 KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0 5 Contents 6 KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0 1 Overview and Architecture TheKendoUI®BuilderbyProgress®facilitatesthemodernizationofexistingProgress®OpenEdge®desktop businessapplicationsbymovingtheapplicationuserinterface(UI)tothewebusingKendoUI.TheseOpenEdge applicationscanbesimpletomorecomplexapplicationscontainingmultiple,feature-specificmodules. ApplicationsthatalreadyconformtotheOpenEdgeReferenceArchitecture(OERA)areespeciallywellsuited formodernizationusingtheKendoUIBuilder.However,youcanmodernizeanyOpenEdgeapplicationwith itsUIseparatedfromitsbusinesslogicrunningonanOpenEdgeapplicationserver,whichcanbeeitheran instanceofProgressApplicationServerforOpenEdgeortheclassicOpenEdge®AppServer®. KendoUIBuildertoolingsupportsthedesignanddevelopmentofamodernandresponsivewebUIintheform ofadeployableOpenEdgewebappthataccessesoneormoreABLapplicationservicesimplementedas OpenEdgeDataObjectServices.ThistoolingsupportsUIupgradesforfutureversionsoftheinitialwebapp overtime,withlittleornoadditionalcoding,usingcustomizabletemplatesandmeta-datafromwhichthe deployablewebappisgenerated. Fordetails,seethefollowingtopics: • StepstomodernizeanOpenEdgeapplication • Architectureandcomponents Steps to modernize an OpenEdge application ForOpenEdge,theKendoUIBuilderincludescomponentsfromseveralProgressproductsthatyouuseinan iterativefashiontomodernizeanOpenEdgeapplicationasfollows: 1. EnsurethatyourapplicationUIisseparatefromitsbusinesslogic,withtheABLbusinesslogictailoredto runonanOpenEdgeapplicationserver.TheOpenEdgeReferenceArchitectureprovidesamethodology KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0 7 Chapter1:OverviewandArchitecture foraccomplishingthis.FormoreinformationontheOERA,seeOpenEdgeGettingStarted:GuideforNew Developers. FormoreinformationontailoringABLbusinesslogictorunonyourchoiceofOpenEdgeapplicationserver, seetheoverviewandapplicationdevelopmentdocumentationfor: • ProgressApplicationServerforOpenEdge—ProgressApplicationServerforOpenEdge:Introducing PASforOpenEdgeandProgressApplicationServerforOpenEdge:ApplicationMigrationand DevelopmentGuide • OpenEdgeAppServer—OpenEdgeGettingStarted:ApplicationandIntegrationServicesandOpenEdge ApplicationServer:DevelopingAppServerApplications YoucanthendeployandrunyourABLapplicationwithitsUIrunninginaseparateABLclientthataccesses itsbusinesslogicasanABLapplicationservice. 2. ImplementanewserviceinterfaceforyourbusinesslogicintheformofanOpenEdgeDataObjectService. AnOpenEdgeDataObjectServiceprovideswebaccesstoyourABLbusinesslogicthroughoneormore OpenEdgeDataObjectsimplementedasABLBusinessEntities.ABLBusinessEntitiesareannotatedABL classorprocedure-basedobjectsthatprovideastandardwebinterfacetoyourdataandbusinesslogic. AnOpenEdgewebappcanthenaccessthisstandardinterfaceusingaJavaScriptDataObject(JSDO) thathidestheunderlyingdetailsofthenetworkrequestandresponseprotocolfromtheapp.ADataObject ServicethenmanagesallwebaccessbetweenaninstanceoftheJSDOinthewebappandagivenData ObjectrunningontheOpenEdgeapplicationserver. ForanoverviewofOpenEdgeDataObjectServicesandhowtoimplementABLBusinessEntitiesasData Objects,seetheinformationonDataObjectServicesinOpenEdgeDevelopment:WebServices. Forinformationoncreating,editing,testing,anddeployingDataObjectServicesforbothPASforOpenEdge andtheclassicOpenEdgeAppServer,seetheProgressDeveloperStudioforOpenEdgeOnlineHelpand theadministrationdocumentationforeachOpenEdgeapplicationserver. Note: AlsoseetheNewInformationdocumentationforrecentservicepacksofyourOpenEdgeRelease 11.6(startingwithServicePack11.6.3). ForinformationontheJSDOandhowitcanbeusedinwebappstoaccessDataObjectServices,seethe ProgressDataObjects:GuideandReference 3. DesignandbuildtheOpenEdgewebappthatcontainsthewebUIforyourOpenEdgeapplicationusingthe KendoUIDesigner.ThisisaNode.js-based,KendoUIBuildertoolthatcaninstallintoyourOpenEdge environment.TheKendoUIDesigneristhusanon-premise,visualdesigntoolthataccelerateswebapp developmentbasedonselectedDataObjectServicemeta-dataandUItemplatesforsupportedKendoUI components. TheinitialresultisasetofUImeta-datathatyoucancustomizeinaprescribedfashion.Youcantheninvoke theintegratedKendoUIGeneratortobuildandpreviewthewebappfromthismeta-data,allowingyouto testtheUIanditsdataaccessfromwithintheKendoUIDesigneritself. ThepresentdocumentationprovidesanoverviewoftheKendoUIDesignerandhowtoworkwithittobuild andtestawebappwithaccesstoOpenEdgedataandbusinesslogic.Formoredetailedinformationon usingtheoptionsoftheKendoUIDesigner,seeKendoUIBuilderbyProgress:UsingtheKendoUIDesigner. 4. Optionally,useProgressDeveloperStudioforOpenEdgetodeployeachstageofcompletionforbothData ObjectServicesandtheclientOpenEdgewebapp.InKendoUIDesigner,youcanconfigurethewebapp locationsotheKendoUIGeneratorautomaticallybuildsthewebappwithinaWebUIprojectofDeveloper Studio.Fromthisproject,youcandeploytheapptoadevelopmentinstanceofPASforOpenEdgetotest generalwebaccess.Ultimately,youcandeploythecompletedwebappforreleaseonanyproductionweb serverofyourchoice. 8 KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0 Architectureandcomponents Forabriefwalk-throughofbuildinganOpenEdgeapplication,end-to-end,withthemodernwebUIprovided byanOpenEdgewebapp,seeKendoUIBuilderbyProgress:SampleWorkflow. Architecture and components ThefollowingfigureshowstheoverallarchitectureoftheKendoUIBuildercomponentsandtheirrelationship formodernizingOpenEdgeapplications: Figure1:KendoUIBuildercomponents Refertothenumberedcalloutsinthefollowingdescription: KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0 9 Chapter1:OverviewandArchitecture 1. UseanappropriateprojectinProgressDeveloperStudioforOpenEdgetodevelopDataObjectsfrom BusinessEntitiesthatyoucreateandpackagetogetherasoneormoreDataObjectServicesfordeployment toanOpenEdgeApplicationServer.UseanABLWebAppprojecttobuildanddeployDataObject ServicestoaninstanceoftheProgressApplicationServerforOpenEdge.UseaDataObjectprojectto buildanddeployDataObjectServicestotheclassicOpenEdgeAppServer. 2. ThedeploymentofDataObjectServicesincludesDataServiceCatalogs.EachDataObjectServiceis definedbyanassociatedDataServiceCatalog.ThisCatalogisaJSONfilethatcontainsmeta-datadescribing theschemaandoperationssupportedbyeachDataObjectmanagedbytheDataObjectService.The JavaScriptDataObjects(JSDOs)thattheKendoUIDesigneranditsgeneratedwebappscreatetoaccess DataObjectresourcesrelyontheCatalogforeachDataObjectServicethatprovidestheseresourcesto manageaccesstothedataacrossthenetwork. 3. TheKendoUIDesignerrunsasaNode.jsapplicationinstalledonyourlocalsystemusingyoursupported defaultbrowser(forexample,ChromeorFirefox)todisplayitsUI.UsetheDesignertocreateanOpenEdge webapp,forwhichyouspecifyanameandfolderlocationforthefiles.AnOpenEdgewebappintheKendo UIBuilderisbuiltfromatemplatethatconsistsofoneormoduleswithaccesstotableresourcesprovided byoneormoreDataObjectServices.Youcreateeachmodulefromoneormoreviewsthatyouspecify usingselectedUITemplateswithapredefinedKendoUIconfiguration,suchasagridandform.Youbind datatoeachviewbyassociatingaDataObjectresourcetableasadatasource.Youcandefineappfunction andpresentationbysettingpropertiesontheapp,eachmodule,anditsviews,thenpreviewtheresultwith realdatafromthedatasourcesthatareboundtotheviews.Atanypointinyourdesign,youcansavethe currentstateofthewebapptoJSONUIMeta-Datathat,togetherwiththeselectedUITemplates,define theUIandbehavioroftheapp.NotethattheUImeta-dataisitselfindependentoftheKendoUI implementation,andisusedtogenerateaKendoUI-basedwebappbasedontheUITemplatesthatyou select. 4. Atanystagethatyouarereadytopreviewandtesttheapp,youcanbuildtheappbyinvokingtheKendo UIGenerator.ThisisaYeoman-basedcodegeneratorthattakesthesavedJSONUIMeta-Dataand referencedUITemplatesasinput,andgeneratesadeployableOpenEdgewebappcontainingthe functionalityyouhavedesigned.Inaddition,theGeneratorbuildsyourwebappinthecontextofBootstrap andAngularJS,whichprovidesaresponsiveUIforyourapp.ThegeneratedHTML5/CSSandJavaScript filesarethensavedtotheapplocationyouhavespecified,whichcanbeaWebUIProjectofProgress DeveloperStudioforOpenEdge. 5. BycreatingaWebUIProjectinDeveloperStudio,youcansaveyourgeneratedWebAppforDeployment eitherasadevelopmentbuildforroundtriptestingonadevelopmentinstanceofPASforOpenEdgeoras areleasebuildfordeliveryonaproductioninstanceofPASforOpenEdge.Inaddition,youcanexportthe WebUIProjectasaWebUIApplication,whichcreatesaWARfileforyourwebappthatyoucandeploy toanycompatiblewebserverofyourchoice. 10 KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0