Add Styling to an MDK App

0 %

Add Styling to an MDK App

Details

Add Styling to an MDK App

2020-03-23

Intermediate

25 min.

Customize an MDK app to display styling to its controls.

You will learn

How to change color of action bar and tool bar
How to change font color and background color of SDK control properties in a section page

Prerequisites

Tutorial group: Set Up for the Mobile Development Kit (MDK)
Download and install: SAP Mobile Services Client on your iOS or Android device
Download and install Barcode Scanner (required only for Android device)

You may clone an existing project from GitHub repository and start directly with step 4 in this tutorial.

MDK Template supports Style LESS file for styling for NativeScript, Android SDK & iOS SDK controls.

Step 1: Create a new MDK project in SAP Web IDE

Make sure that you have already created a new destination mobileservices_cf as per this tutorial. This is required to connect SAP Web IDE to Mobile Services on Cloud Foundry environment.

This step includes creating the Mobile Development Kit project in the Editor.
Launch the SAP Web IDE and select the MDK perspective by clicking on the icon in the left panel.
Right click on Workspace folder and select New | MDK CRUD Project.

The MDK CRUD Project template creates the offline or online actions, rules, messages and list detail pages along with editable capability in respective pages. You can use such template to handle error archive situation.

More details on MDK template is available in help documentation.
Enter the Project Name as MDK_Styling and click Next.
Leave the default values in Application Creation step as it is, click Next.

In Service Creation step, provide and select the below information:

Field	Value
`Name`	`SampleServiceV2`
`Service URL`	`/destinations/mobileservices_cf`
`Application ID`	`com.sap.mdk.demo`
`Destination Name`	`com.sap.edm.sampleservice.v2`
`Enable Offline Store`	`Should be checked`

If you do not find mobileservices_cf destination, please ensure that you have followed this tutorial to setup this destination in SAP Cloud Platform cockpit.

If you see a Authentication Required pop-up, then enter your cloud platform User Name and password to authenticate.

For Offline OData capability only OData V2 is supported. OData V2 and V4 are supported for Online OData.

Regardless of whether you are creating an online or offline application, this step is needed app to connect to an OData service. When building an Mobile Development Kit application, it assumes the OData service created and the destination that points to this service is setup in Mobile Services and SAP Cloud Platform.

Since you will create an offline based app, hence Enable Offline Store option is selected.

Click Check Service to validate the service properties. If all the details are fine, you will see a success message. Click Next.

More details on Sample Back End is available in help documentation.
In Metadata Source step, select checkbox before Entity Type to select all available entities‚ and click Next.
In following steps go with default selections and Finish the project creation.

After clicking Finish, the wizard will generate your MDK Application based on your selections. You should now see the MDK_Styling project in the project explorer.

Done

Log on to answer question

Step 2: Add style metadata in LESS file

View Full Instructions

The LESS stylesheet provides the ability to define styling styles that can be used to style the UI in the MDK app.

You can find more details about styling in MDK.

In the SAP Web IDE project, expand the Styles folder and open the Styles.less file.

Copy and paste the following code.


@mdkYellow1: #ffbb33;
@mdkRed1: #ff0000;

//// This style applies to all the ActionBars in the application
ActionBar {
    color: white;
    background-color: red;
}

//// This style applies to all the ToolBars in the application
ToolBar {
    color: white;
    background-color: blue;
}

//// LogoutToolbarItem is tool bar item for Logout in Main.page
#LogoutToolbarItem  {
    color: brown;
}

//// UploadToolbarItem is tool bar item for Upload in Main.page
#UploadToolbarItem  {
    color: green;
}

//// By-Class style: These style classes can be referenced from rules and set using ClientAPI setStyle function
//// below snippet is to style SalesOrder button on Main.page
.MySalesOrderButton {
  font-color: @mdkRed1;
  background-color: black;
}

//// below snippet is to style Title property of an Object Table control in Customers_List.page
.ObjectTableTitle {
  font-color: @mdkYellow1;
  background-color: @mdkRed1;
}

By default there is a tint overlay overlay on the toolbar. If you want a solid color toolbar that matches the action bar you need to use the bartintcolor property in the style instead of the background color (or in addition to). bartintcolor: blue;

Save your changes to the Styles.less file.

Styles.less is already bound to Styles properties in Application.app file.

If you want to style 2 toolbar items with the same color, which syntax is correct? #UploadToolbarItem & #LogoutToolbarItem { color: #FFF4E6;} #UploadToolbarItem, #LogoutToolbarItem { color: #FFF4E6;} Not possible to combine in a single expression

Step 3: Set the styling for SDK controls

In this step, you will bind style classes:

MySalesOrderButton to SalesOrderHeaders section button control on Main.page
ObjectTableTitle to Title property of Object Table in Customers_List.page

Double-click on Main.page, select SalesOrderHeaders section button, click on link icon next to Style property.
In Object browser, select SDK Style Classes from dropdown, double-click on MySalesOrderButton class to bind style property and click OK.
Save the changes to Main.page.
Navigate to Pages | Customers, double-click on Customers_List.page, select Object Table control, scroll-down to Style section.
Click on link icon next to Title property.
In Object browser, select SDK Style Classes from dropdown, double-click on ObjectTableTitle class to bind style property and click OK.
Save the changes to Customers_List.page.

Done

Log on to answer question

Step 4: Deploy and activate the application

So far, you have learned how to build an MDK application in the SAP Web IDE editor. Now, we deploy this application definition to Mobile Services.

Right click on the MDK_Styling MDK Application in the project explorer pane and select MDK Deploy and Activate.
Let the default configuration as it is and click Next.

Filter Files will be filtered and ignored in web packing process.

Externals is the list of NPM modules that are part of the MDK Client application and should not be validated in the bundle.

By default, automatically deploy option is selected, In other words, the application is automatically deployed from Mobile Services to your MDK client.
Click the drop down for Destination Name and select the mobileservices_cf destination , you will find list of existing application IDs, select the one you have chosen while creating the project in step 1.
Click Next to finish the deployment from SAP Web IDE.

You should see Application deployed successfully message in console log.

Done

Log on to answer question

Step 5: Populate the QR code for app on-boarding

SAP Web IDE has a feature to generate QR code for app on-boarding.

Right click on the MDK_Styling MDK Application in the project explorer pane and select MDK Deploy and Activate.
Let the default configuration as it is and click Next.
Click on QR code icon to populate QR code for app on-boarding.

Done

Log on to answer question

Step 6: Run the app in MDK client

Make sure you are choosing the right device platform tab above.

On Android, camera app does not support scanning the QR code. You can use Barcode Scanner app to scan it.
Open the Barcode scanner app and start scanning the QR code showing in SAP Web IDE.
Tap Open browser. It will open SAP Mobile Services Client app.
Tap GET STARTED to connect MDK client to SAP Cloud Platform.
Enter Email address and password to login to SAP Cloud Platform and tap Log On to authenticate.
AGREE on End User License Agreement.
Choose a passcode with at least 8 characters for unlocking the app and tap NEXT.
Confirm the passcode and tap DONE.

Optionally, you can enable fingerprint to get faster access to the app data.
Tap OK.

The MDK client receives deployed metadata definitions as a bundle.

Now, you will see the Main page (with LOGOUT and SYNC options at bottom of the page) and list of entity sets to navigate to List-Detail pages. In Main page, you will notice styling on action bar, tool bar, items (Logout & Sync) available on tool bar, SALESORDERHEADERS button.
Tap on CUSTOMERS to navigate to Customer List. You will see that Title property has been styled.

On iPhone, open your camera app and start scanning the QR code, as shown below.
Tap the toast message to launch SAP Mobile Services Client. It will open SAP Mobile Services Client app.
Tap Start to connect MDK client to SAP Cloud Platform.
Enter Email address and password to login to SAP Cloud Platform and tap Log On to authenticate.
Agree on End User License Agreement.
Choose a passcode with at least 8 characters for unlocking the app and click Next.
Confirm the passcode and click Done.

Optionally, you can enable Touch ID to get faster access to the app data, click Enable.
Tap OK.

The MDK client receives deployed metadata definitions as a bundle.

Now, you will see the Main page (with Logout and Sync options at bottom of the page) and list of entity sets to navigate to List-Detail pages. In Main page, you will notice styling on action bar, tool bar, items (Logout & Sync) available on tool bar, SalesOrderHeaders button.
Tap on Customers to navigate to Customer List. You will see that Title property has been styled.