+ All Categories
Transcript
Page 1: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 1/47

SAPFioriMobile(v2.1.x)

Introduct ion

Whatarehybridmobileapps?

Hybridmobileappsarewebapplicationswrappeduptheirownbrowserwhichcanrunonanyofthemobileplatforms(Android,iOS,Windowsetc.).Thebigadvantageofahybridappisthatithasasinglecodebase,whereasanativeappmustbere-writtenforeachplatform.

ApacheCordovaisanopen-sourceframeworkfordevelopinghybridapps.Tousenativefeatures(beyondthosealreadyavailableviahmtl5,)appscanmakeuseofplugins.Thesepluginshandletheplatform-specificcodeandareavailableforsingleormultipleplatforms.PluginsareavailabletoaccesstheGPS,accelerometerorcamera,forexample.

SAPhavewrittentheirownplugins,brandedasKapsel,tohandlethingslikelogonandofflineOData.Thesebringanenterpriseflavourtohybridapps.

WhatisFioriMobile?

UntilrecentlySAP’srecommendedapproachwastousetheHybridApplicationToolkit(orHAT)inordertobuildhybridapps.Theappbuildtookplaceonthedeveloper’sPCorMac.TheHATgainedareputationforbeingtrickytosetupandthathinderedtheuseofhybridappswithintheSAPecosystem.

FioriMobilehasat it scoreacloud-buildservice,sothereisnoneedtoinstalltheHAT.WecantriggerthebuildfromWebIDE.Wespecifythe(alreadydeployed)Fioriapp(s)thatwewanttopackageandafterafewminuteswecandownloadthe.apk(forAndroid)and.ipa(foriOS)filesreadytobeinstalledonmobiledevices.

Doesit work?

Thecloudbuildserviceworkswell.Ittypicallybuildforbothplatformsinabout8minuteswithoutissueas.Therehaveonlybeenacoupleofoccasionswhenbuildsfailedduetotechnicalproblems.

Therearesomefacetstothetechnologywhichdon’tfeelmatureyet.OneareaistheofflineODatafeatures.WhenusingFioriMobilethingsworkdifferentlytothemoreconventionalhybridandnativeapps.Oneexamplewouldbethedestinations,becauseFioriMobileappsuseagenerateddestinationwhichreferencetheSAPCloudPlatform(CP)portalservice.

Page 2: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 2/47

MypointisnotthatofflineODataseemsimmature,ratherthattheofflinefeaturescanbetrickywhenusedwithFioriMobileapps.WearestillreceivingassistancefromSAPtogettheofflinefeaturesofourappoptimised.Thisisashame,becauseshareddataandthehandlingofdeltarequests,forexample,aretwofeatureswhichjustifythe‘middleware’approachtoofflinethatSAPhavetaken.

Authenticationhasalsobeenachallenge.OnapreviousprojectIusedtheFioriClientinconjunctionwithSAPCloudIdentity(nowofficiallySAPCloudPlatformIdentityAuthentication).TheFioriClientstoredtheusernameandpasswordonthedevicesothattheuserdidn’tneedtoenterthemeverytimetheirsessiontimedout.Wehaven’tachievedthatyetwithourFioriMobileapp.

Account andServices

IfyouhaveproductionaccountbrowseonHCPCockpitandlogin.Ifyouusetrialaccountloginhere

AswesaidbeforethereistwowaystobuildSAPFiorimobileapplication:

1. UsingFioriMobileService.NotethatthisservicehavebeendiscontinuedfromMarch31,2018.StrategicfeaturesavailableinthemobileserviceforSAPFiorihavebeenincorporatedintoSAPCloudPlatformmobileservicefordevelopmentandoperations.Howeveryoucanusethisserviceifyouhaveoldaccountthatalreadyhasenabledthatservice.Usingthisservicerequiretwootherservicestobeenabled:PortalServiceandSAPWebIDEFull-StackService.

Page 3: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 3/47

Page 4: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 4/47

Page 5: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 5/47

2. UsingHAT (HybridApplicationToolkit)extensioninSAPWebIDEFull-StackService.UsingthisextensionrequireMobileServicestobeenabled.

CreateFioriLaunchpad

IfweuseSAPForiMobileServicetobuildmobileapplicationfirstweneedtocreateandpublishsitewhereapplicationwillbedeployed.OtherwiseifweuseHATskipthisstepandcontinuewithCreateFioriProject

GotoPortalServiceandcreatenewSiteDirectory

Apopupwillbedisplayed.EnteryourSiteName,chooseSAPFioriLaunchpadasTemplateSourceandclickCreate

Page 6: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 6/47

FollowingthisyouwillberedirectedtoSAPFioriConfigurationCockpit.ClosethetabandgobacktoAdminSpaceforPortalService.

NowweneedtoPublishthisSiteandSetasdefault.

Page 7: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 7/47

Page 8: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 8/47

CreateFioriProject

OncewecreateandpublishcmbSDKTestSitewecancreateourFioriproject(ifweuseFioriMobileServicetobuildmobileapplication,otherwiseifweuseHATwedon'tneedtopublishsiteonLaunchpadandcreatingFioriprojectwillbeourfirststep).

GotoServicestabagain,openSAPWebIDEFull-Stackservice,andclickonGotoService

Page 9: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 9/47

Anewtabwillbeopened.FromherewewillstarttocreateourFioriproject.

ClickonNewProjectfromTemplate

Page 10: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 10/47

ChooseSAPUI5ApplicationfromTemplateSelection

SetyourProjectNameandNamespace

Page 11: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 11/47

ChoosetheViewTypeandsettheViewName.InoursamplewewilluseXMLView.ClickFinishandyourFioriprojectiscreated.

HowtousecmbSDKcordovaplugin

IntheSAPWebIDEWorkspacewecanseeallfilesthatourFioriprojectinludes.

Page 12: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 12/47

OpenComponent.jsfile .

Component.jsisthefirstpointofourapplication,wecansaythatitservesasindexwhichencapsulatesallourapplicationsdetails,i.e .viewnames,routingdetails,mainview,applicationstype(FullScreenorSplitApp),applicationserviceconfigurationetc..

Hereininit functionwewillconfigureourplugin.Setpropertiesthatweneed,setcallbackfunctions,callsomemethods,etc..

sap.ui.define([ "sap/ui/core/UIComponent", "sap/ui/Device",

Page 13: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 13/47

"MyFirstFioriApp/MyFirstFioriApp/model/models"],function(UIComponent,Device,models){ "usestrict";

varoEventBus=sap.ui.getCore().getEventBus(); varscannerIsInitialized=false;

returnUIComponent.extend("MyFirstFioriApp.MyFirstFioriApp.Component",{

metadata:{ manifest:"json" },

/** *ThecomponentisinitializedbyUI5automaticallyduringthestartupoftheappandcallstheinitmethodonce. *@public *@override */ init:function(){ //callthebasecomponent'sinitfunction UIComponent.prototype.init.apply(this,arguments);

//enablerouting this.getRouter().initialize();

//setthedevicemodel this.setModel(models.createDeviceModel(),"device");

if(!scannerIsInitialized){

scannerIsInitialized=true; window.readerConnected=0; window.scannerActive=false;

cmbScanner.addOnResume(function(result){ cmbScanner.setAvailabilityCallback((readerAvailability)=>{ if(readerAvailability===cmbScanner.CONSTANTS.AVAILABILITY_AVAILABLE){ oEventBus.publish("ScanView","SetConnectionStatus",{ statusText:"AVAILABLE" }); cmbScanner.connect((result)=>{}); }else{ oEventBus.publish("ScanView","SetConnectionStatus",{ statusText:"NOTAVAILABLE" }); } }); if(Device.os.android){ cmbScanner.connect((result)=>{}); } });

cmbScanner.addOnPause(function(result){ if(Device.os.android){ cmbScanner.disconnect(); } cmbScanner.setAvailabilityCallback();

Page 14: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 14/47

});

cmbScanner.setPreviewContainerPositionAndSize(0,0,100,50);

cmbScanner.setConnectionStateDidChangeOfReaderCallback((connectionState)=>{ if(connectionState===cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTED){ oEventBus.publish("ScanView","SetConnectionStatus",{ statusText:"CONNECTED" }); if(window.readerConnected!=connectionState){ cmbScanner.setSymbologyEnabled("SYMBOL.DATAMATRIX",true); cmbScanner.setSymbologyEnabled("SYMBOL.C128",true); cmbScanner.sendCommand("SETTRIGGER.TYPE2"); } }elseif(connectionState==cmbScanner.CONSTANTS.CONNECTION_STATE_DISCONNECTED){ oEventBus.publish("ScanView","SetConnectionStatus",{ statusText:"DISCONNECTED" }); }elseif(connectionState==cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTING){ oEventBus.publish("ScanView","SetConnectionStatus",{ statusText:"CONNECTING" }); }elseif(connectionState==cmbScanner.CONSTANTS.CONNECTION_STATE_DISCONNECTING){ oEventBus.publish("ScanView","SetConnectionStatus",{ statusText:"DISCONNECTING" }); } window.readerConnected=connectionState; });

cmbScanner.setAvailabilityCallback((readerAvailability)=>{ if(readerAvailability===cmbScanner.CONSTANTS.AVAILABILITY_AVAILABLE){ oEventBus.publish("ScanView","SetConnectionStatus",{ statusText:"AVAILABLE" }); cmbScanner.connect((result)=>{}); }else{ oEventBus.publish("ScanView","SetConnectionStatus",{ statusText:"NOTAVAILABLE" }); } });

cmbScanner.setActiveStartScanningCallback((result)=>{ if(result===true) window.scannerActive=true;

Page 15: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 15/47

else window.scannerActive=false; });

cmbScanner.setPreviewOptions(cmbScanner.CONSTANTS.PREVIEW_OPTIONS.DEFAULTS|cmbScanner.CONSTANTS.PREVIEW_OPTIONS.HARDWARE_TRIGGER);

cmbScanner.setCameraMode(cmbScanner.CONSTANTS.CAMERA_MODES.NO_AIMER);

varsdkKEY=""; if(Device.os.android) sdkKEY=this.getModel("i18n").getProperty("MX_MOBILE_LICENSE_ANDROID"); else sdkKEY=this.getModel("i18n").getProperty("MX_MOBILE_LICENSE_iOS");

cmbScanner.registerSDK(sdkKEY);

cmbScanner.loadScanner(0,(result)=>{ cmbScanner.connect((result)=>{}); });

oEventBus.subscribe("Component","LoadScanner",this.loadScanner,this); } }, loadScanner:function(sChanel,sEvent,oData){ cmbScanner.disconnect((result)=>{ cmbScanner.loadScanner(oData.selectedDevice,(result)=>{ cmbScanner.connect((result)=>{}); }); }); }, onExit:function(){ oEventBus.unsubscribe("Component","LoadScanner",this.loadScanner,this); cmbScanner.disconnect(); cmbScanner.setAvailabilityCallback(); } });});

cmbScannerisanobjectthatrepresentsourplugin.WiththisobjectwecanaccessallAPImethodsandConstantsfromourplugin.

scannerIsInit ialized-variabletomakesurethatwesetsomefunctionsforinitializationonlyonetimewindow.readerConnected-globalvariablethatischangedeverytimewhenthereaderconnectionstateischangedwindow.scannerAct ive-globalvariablethatshowsusifscanningisactiveornotcmbScanner.addOnPause-inthismethodwedisconnectionfromreaderdeviceonAndroid(oniOSthisishandledautomatically),andstoplisteningtoavailabilitychangingcmbScanner.addOnResume-inthismethodwetrytoconnectwithreaderdeviceagainandsetcallbackforavailabilitychanging

Page 16: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 16/47

cmbScanner.setPreviewContainerPosit ionAndSize-tosetthesizeandpositionofthepreviewcontainer.Learnmorehere.cmbScanner.setConnect ionStateDidChangeOfReaderCallback-allconnect /disconnect eventsshouldbehandledwithinthecallbackfunctionsetwiththisAPImethod.IfconnectionstateisconnectedwesetsomereaderdevicesettingswithAPImethodsordirectlywithsendCommand()method.Hereinthisexampleweenablesymbologiesandsettriggertype.AlsohereweshouldLicensingtheSDK.WewillspeakaboutthislaterinthissectioncmbScanner.setAvailabilit yCallback-tomonitorforavailabilityoftheMXdevice.IfMXdeviceisavailablewetrytoconnect.Learnmorehere.cmbScanner.setAct iveStartScanningCallback-tomonitorthestateofthescanner.Learnmorehere.cmbScanner.loadScanner-togetascannerupandrunning.Learnmorehere.

Hereweareonlyconfiguringreaderdevice,handlingconnections,availability,etc..Wewilldoscanningandgettingresultsinotherviews.IfwewanttonotifyusersabouteveryconnectionstatechangedorotherinfoaboutreaderdevicewewillbeusingEventBussapobject.Withthisobjectwecanpublishfunctionandcallthemfromanyviewintheapplication.InthisexampleonconnectionstatechangedwithEventBuswearecallingSetConnect ionStatusfunctionthatisimplementedinviewwherescanningisperformedandsetlabeltexttoshowusercurrentconnectionstate.

NowopenScanView.view.xmlandaddthiscode:

<mvc:ViewcontrollerName="MyFirstFioriApp.MyFirstFioriApp.controller.ScanView"xmlns:mvc="sap.ui.core.mvc"displayBlock="true"xmlns="sap.m" xmlns:core="sap.ui.core"> <Shellid="shell"> <Appid="app"> <pages> <Pageid="page"title="{i18n>title}"> <subHeader> <Toolbarid="__toolbar2"width="100%"> <content> <FlexBoxid="__box0"width="100%"alignContent="Center"alignItems="Start"direction="Column"fitContainer="true"justifyContent="Center"> <items> <Selectid="selectActiveDevice"items="{/Devices}"textAlign="Center"selectedKey="0"change="activeDeviceChanged"> <core:Itemtext="{text}"key="{key}"/> </Select> </items> </FlexBox> <Labelid="lblStatus"text="DISCONNECTED"width="100%"textAlign="End"design="Bold"/> </content> </Toolbar> </subHeader> <content> <FlexBoxid="flexBoxContainer"width="100%"alignContent="Start"alignItems="Start"direction="Column"fitContainer="true"/> </content>

Page 17: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 17/47

<footer> <Toolbarid="__toolbar1"width="100%"> <content> <Buttonid="btnScan"press="btnScanPress"text="Scan"width="100%"/> </content> </Toolbar> </footer> </Page> </pages> </App> </Shell></mvc:View>

YoucandesignviewwithCodeEditororwithLayoutEditor.

AfterthatopenScanView.cont roller.jsandaddthiscode

sap.ui.define([ "sap/ui/core/mvc/Controller"],function(Controller){ "usestrict"; varoEventBus=sap.ui.getCore().getEventBus(); varoModel=newsap.ui.model.json.JSONModel(); oModel.setData({ Devices:[{

Page 18: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 18/47

key:"0", text:"MXDevice" },{ key:"1", text:"MobileCamera" }] });

returnController.extend("MyFirstFioriApp.MyFirstFioriApp.controller.ScanView",{ onInit:function(){ this.getView().setModel(oModel); }, onAfterRendering:function(){ window.scannerActive=false; switch(window.readerConnected){ casecmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTED: this.getView().byId("lblStatus").setText("CONNECTED"); break; casecmbScanner.CONSTANTS.CONNECTION_STATE_DISCONNECTED: this.getView().byId("lblStatus").setText("DISCONNECTED"); break; casecmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTING: this.getView().byId("lblStatus").setText("CONNECTING"); break; casecmbScanner.CONSTANTS.CONNECTION_STATE_DISCONNECTING: this.getView().byId("lblStatus").setText("DISCONNECTING"); break default: this.getView().byId("lblStatus").setText("UNKNOWN"); break; } oEventBus.subscribe("ScanView","SetConnectionStatus",this.setConnectionStatus,this); cmbScanner.setResultCallback((result)=>{ if(result&&result.readResults&&result.readResults.length>0){

result.readResults.forEach((item,index)=>{

if(item.goodRead==true){ //Performsomeactiononbarcoderead //example:varverticalLayoutContainer=newsap.ui.layout.VerticalLayout(null,{ width:"100%" }).addStyleClass("sapUiSmallMarginTop"); verticalLayoutContainer.addContent(newsap.m.Label({ text:item.symbologyString+":", textAlign:"Begin", design:"Bold" }).addStyleClass("sapUiSmallMarginBegin")); verticalLayoutContainer.addContent(newsap.m.Text({ text:item.readString, textAlign:"Begin" }).addStyleClass("sapUiSmallMarginBegin")); this.getView().byId("flexBoxContainer").addItem(verticalLayoutContainer);

}else{

Page 19: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 19/47

//Performsomeactionwhennobarcodeisreadorjustleaveitempty}});} }); }, btnScanPress:function(){ if(window.readerConnected===cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTED){ if(window.scannerActive===true){ cmbScanner.stopScanning(); }else{ cmbScanner.startScanning(); } } }, setConnectionStatus:function(sChanel,sEvent,oData){ this.getView().byId("lblStatus").setText(oData.statusText); }, activeDeviceChanged:function(){

cmbScanner.disconnect((result)=>{ oEventBus.publish("Component","LoadScanner",{ selectedDevice:parseInt(this.getView().byId("selectActiveDevice").getSelectedKey()) }); }); }, onExit:function(){ oEventBus.unsubscribe("ScanView","SetConnectionStatus",this.setConnectionStatus,this); if(window.readerConnected===cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTED){ if(window.scannerActive===true){ cmbScanner.stopScanning(); } } cmbScanner.setResultCallback((result)=>{ returnfalse; }); } });});

InthisviewwehaveaScanbuttontostartScanning()/stopScanning()andcmbScanner.setResultCallbacktohandlesuccessfulscanresults.

BuildFioriMobileApplicat ion

InthissectionwewillexplainhowtobuildFioriMobileApplication(generate.ipaand.apk

Page 20: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 20/47

files).

1.UsingHAT (HybridApplicationToolkit)

FirstweneedtoenableHAT extensioninSAPWebIDEWorkspase.OpenTools->Preferences:

NavigatetoExtensionssectionandsearchforHATextension:

BydefaultHATextensionisdisabled.EnableHATextensionandclickSave.AfterenablingwewillneedtorefreshSAPWebIDE.

Page 21: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 21/47

AfterenablingHATgoagaininTools->Preferences.IfyouhavebothFioriMobileandMobileServicesenabledyouwillhaveoptionstoselectonethatwillbeusedasCloudBuildService.PleasechooseMobileServicesandclickSave:

Page 22: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 22/47

Ifyoudon'tseetheseradiobuttonsyoudon'tneedtodoanything.MobileServicewillbeenabledbydefault.NowrightclickonprojectrootandyouwillseeMobilesection.ClickEnableasHybridMobileProject

Page 23: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 23/47

Youcanseethatsomenewfilesareaddedinourprojectthatallowustobuildthisprojectasmobileapplication.Beforebuildweneedtoaddourcmbsdk-cordovaplugin.ClickonSelectCordovaPlugins,findcmbsdk-cordovapluginfrompublicpluginsandaddinthisproject.Don'tforgettoclickSavewhenyouaddplugin.

Page 24: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 24/47

Page 25: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 25/47

Wearereadytobuildourmobileapplicationandgenerate.ipaand.apkfiles.ClickonBuildPackagedAppfromMobilemenu.

Setyourapplicationdetails

Page 26: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 26/47

ChooseplatformorbothiOSandAndroidplatforms,selectsigningprofiles(orcreateoneifyoudon'thave)andsetsomecommonoptions

Page 27: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 27/47

Startbuildingprocess

Page 28: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 28/47

Whenbuildingprocessisfinishedpopupfromwhereyoucandownload.ipaand.apkfileswillbeshown

Page 29: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 29/47

2.UsingFioriMobileService

BeforewestarttobuildourFioriMobileApplicationwithFioriMobileServiceweneedtodeployourprojectonSAPHANACloudPlatform.

RightclickonprojectfolderthenselectDeployandchooseDeploytoSAPCloudPlatform

Page 30: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 30/47

SetapplicationdetailsandclickDeploy

Page 31: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 31/47

Afterasuccessfuldeploy,thenextstepistoRegistertoSAPFiorilaunchpadthatwe'vecreatedintheprevioussection.

Chooseaccountandsetapplicationname

Page 32: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 32/47

SetType(Staticbydefault),setTitle,andSubtitle

ChooseSitethatwecreatebefore,catalog,andgroup(samplecatalogandgroupiscreatedbydefault)

Page 33: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 33/47

ClickfinishonConfirmationtabandifeverythingisfinethepopupbelowwillbeshown.ClickOKtoclosethispopup.WiththesestepswedeployourprojectonHCPandnowwecancontinuetobuildourFioriMobileApplication

GotoServicestabagain,openFioriMobileservice,andclickonGotoAdminConsole

Page 34: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 34/47

OpenManagePluginssectionanduploadcmbsdk-cordovapluginascustomplugin.Youcandownloadlatestpluginonthislink.

Page 35: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 35/47

Nextmanageyoursingingprofiles.OpenManageSigningProfilessectionandcreatenewonesifyoudon'thavealready

Page 36: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 36/47

NowopenManageAppssectionandcreateNewApplication

Selectfirstoption

Page 37: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 37/47

SelectyourFioriCloudEditionasFioriServer

Page 38: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 38/47

Selectapplicationthatwecreatedbefore(withdoubleclickordrag&drop)

Page 39: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 39/47

Setyouapplicationnameandsigningprofiles.Atthebottomofpageyouhavequestion"Areyoureadytobuildtheapplication?".Select"No,Iwouldliketocustomizemyapplication".

Page 40: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 40/47

Windowwherewecancontinuewithappcustomizationwillbeopened.Fromherewewilladdpluginthatweuploadedbeforeanddisablepasscodescreen.Youcansetsomeothersparametersperyourneeds.Alsoimportantthinghereistosaveeverychangethatwillbemade.

Page 41: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 41/47

Page 42: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 42/47

Page 43: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 43/47

Wearereadytobuildourmobileapplicationandgenerate.ipaand.apkfiles.NavigatetoPlatformsandclickBuildAllbuttonifyouwanttobuildbothiOSandAndroidplatformtogether,oryoucanbuildonebyonefromActionsgridcolumn.

Page 44: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 44/47

Buildpopupwillbeshown.ClickBuildbuttonandwaitwhilebuildingprocessfinish.

Page 45: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 45/47

Whenbuildingprocessisfinishedyoucandownloadbinary(.ipaor.apk)fileandinstallapplicationonyourmobiledevice

Page 46: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 46/47

LicensingtheSDK

IfyouplantousethecmbSDKtodomobilescanningwithasmartphoneoratablet(withouttheMXmobileterminal),theSDKrequirestheinstallationofalicensekey.Withoutalicensekey,theSDKwillstilloperate,althoughscannedresultswillbeblurred(theSDKwillrandomlyreplacecharactersinthescanresultwithanasteriskcharacter).

ContactyourCognexSalesRepresentativeforinformationonhowtoobtainalicensekeyincludingtriallicenseswhichcanbeusedfor30daystoevaluatetheSDK.

Afterobtainingyourlicensekeyopeni18n.propertiesfile inyourprojectonSAPWEBIDEservice,andsetyourobtainedkeys.

Page 47: SAP Fiori Mobile (v2.1.x) - Cognex

t it le:SAPFioriMobile(v2.1.x);ver:2.6.x 47/47

ThengobacktotheComponent.jsfile andcheckthiscode:

...

varsdkKEY="";if(Device.os.android)sdkKEY=this.getModel("i18n").getProperty("MX_MOBILE_LICENSE_ANDROID");elsesdkKEY=this.getModel("i18n").getProperty("MX_MOBILE_LICENSE_iOS");

cmbScanner.registerSDK(sdkKEY);

...

Youcanseethatyoureadthiskeyfromi18n.propertiesandcallcmbScanner.registerSDKmethodtoregisterSDKwithyourlicensekey.


Top Related