Add Styling to an MDK App

0 %

Add Styling to an MDK App

Details

Add Styling to an MDK App

Jitendra Kansal

September 9, 2021

Created by

September 27, 2019

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 MDK 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 (If you are connecting to AliCloud accounts then you will need to brand your custom MDK client by allowing custom domains.)

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

Step 1: Create a new MDK project in SAP Business Application Studio

This step includes creating the mobile development kit project in the editor.

Launch the Dev space in SAP Business Application Studio.
Click Start from template on Welcome page.

If you do not see Welcome page, you can access it via Help menu.
Select MDK Project and click Start.

In Type step, select or provide the below information and click Next:

Field	Value
`MDK Template Type`	Select `CRUD` from the dropdown
`Your Project Name`	`MDK_Styling`
`Your Application Name`	<default name is same as project name, you can provide any name of your choice>
`Target MDK Client Version`	Leave the default selection as `MDK 6.0+ (For use with MDK 6.0 or later clients)`

The CRUD template creates the offline or online actions, rules, messages, List Detail Pages with editable options. More details on MDK template is available in help documentation.

This screen will only show up when your CF login session has expired. Enter your login credentials, click Login icon and select the org & space where you have set up the initial configuration for your MDK app.

In Service configuration step, provide or select the below information and click Next:

Field	Value
`Data Source`	Select `Mobile Services` from the dropdown
`Mobile Services Landscape`	Select `standard` from the dropdown
`Application Id`	Select `com.sap.mdk.demo` from the dropdown
`Destination`	Select `SampleServiceV2` from the dropdown
`Enter a path to the OData service`	Leave it as it is
`Enable Offline`	It’s enabled by default

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 set up in Mobile Services.

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

In Data Collections step, select Customers and Products. Click Finish to complete 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 MDK_Styling 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: gray; /* Android */
    bartintcolor: gray;     /* iOS */
}

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

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

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

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

//// below snippet is to style Object Header control in Customers_Detail.page

/* Object Header - BodyText */
/* iOS Only */
.objectHeaderBodyText {
  font-color: red;
}

/* Object Header - Description */
/* iOS Only */
.objectHeaderDescription {
  font-color: blue;
}

/* Object Header - Footnote */
/* iOS Only */
.objectHeaderFootNote {
  font-color: green;
}

/* Object Header - Headline */
/* iOS Only */
.objectHeaderHeadline {
  font-color: #ff00ff;
}

/* Object Header - Background */
.objectHeaderBackground {
background-color: #DC143C;
}

/* Object Header - StatusText */
/* iOS Only */
.objectHeaderStatus {
  background-color: #cccccc;
  font-color: red;
  font-name: italicSystem;
  font-style: italic;
  font-size: 18;
}

/* Object Header - Subhead */
/* iOS Only */
.objectHeaderSubhead {
  font-color: yellow;
}

/* Object Header - SubstatusText */
/* iOS Only */
.objectHeaderSubStatus {
  background-color: #cccccc;
  font-color: blue;
  font-name: italicSystem;
  font-style: italic;
  font-size: 18;
}

To learn more on styling, find more details in help documentation.

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:

MyCustomerButton to Customers section button control on Main.page
ObjectTableTitle to Title property of Object Table in Customers_List.page
objectHeaderBodyText to BodyText property of Object Header in Customers_Detail.page
objectHeaderDescription to Description property of Object Header in Customers_Detail.page
objectHeaderFootNote to Footnote property of Object Header in Customers_Detail.page
objectHeaderHeadline to HeadlineText property of Object Header in Customers_Detail.page
objectHeaderBackground to ObjectHeader property of Object Header in Customers_Detail.page
objectHeaderStatus to StatusText property of Object Header in Customers_Detail.page
objectHeaderSubhead to Subhead property of Object Header in Customers_Detail.page
objectHeaderSubStatus to SubstatusText property of Object Header in Customers_Detail.page

In the Main.page, select Customers section button, click link icon next to Style property.

In Object browser, double click MyCustomerButton class to bind style property and click OK.
Navigate to Pages | Customers, click Customers_List.page, select Object Table control, scroll-down to Style section.

Click link icon next to Title property.

In Object browser, double-click ObjectTableTitle class to bind style property and click OK.
Navigate to Pages | Customers, click Customers_Detail.page, select Object Header control, scroll-down to Style section and bind control properties to style properties.

Which language extension for CSS is used by the Mobile Development Kit for styling applications? CSS Cleaner Leaner Style Sheets (LESS) Stylus Syntactically Awesome Style Sheets (Sass)

Step 4: Deploy the application

So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, you will deploy this application definition to Mobile Services and Cloud Foundry to consume it as Mobile and Web application respectively.

Right-click Application.app and select MDK: Deploy.
Select deploy target as Mobile & Cloud.

MDK editor will deploy the metadata to Mobile Services (for Mobile application) followed by to Cloud Foundry (for Web application).

You should see successful messages for both deployments.

Done

Log on to answer question

Step 5: Run the app

Make sure you are choosing the right device platform tab above. Once you have scanned and on-boarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

SAP Business Application Studio has a feature to generate QR code for app onboarding.

Click the Application.app to open it in MDK Application Editor and click Application QR Code icon.
Select com.sap.mdk.demo application from the list.

The On-boarding QR code is now displayed.
Follow these steps to on-board the MDK client.

Once you accept app update, you will see the Main page (with LOGOUT and SYNC options at bottom of the page), CUSTOMERS and PRODUCTS entity sets to navigate to List-Detail page. In Main page, you will notice styling on action bar, tool bar, items (Logout & Sync) available on tool bar, CUSTOMERS button.
Tap CUSTOMERS to navigate to Customer List. You will see that Title property has been styled.
Tap any record to navigate to Customer Detail page. You will see that Object Header control has been styled.

Make sure you are choosing the right device platform tab above. Once you have scanned and on-boarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

SAP Business Application Studio has a feature to generate QR code for app onboarding.

Click the Application.app to open it in MDK Application Editor and click Application QR Code icon.
Select com.sap.mdk.demo application from the list.

The On-boarding QR code is now displayed.
Follow these steps to on-board the MDK client.

Once you accept app update, you will see the Main page (with Logout and Sync options at bottom of the page), Customers and Products entity sets to navigate to List-Detail page. In Main page, you will notice styling on action bar, tool bar, items (Logout & Sync) available on tool bar, Customers button.
Tap Customers to navigate to Customer List. You will see that Title property has been styled.
Tap any record to navigate to Customer Detail page. You will see that Object Header control has been styled.

Click the highlighted button to open the MDK Web application in a browser. Enter your SAP BTP credentials if asked.

You can also open the MDK web application by accessing its URL from .project.json file.

You will see the Main page (with Logout option at bottom of the page), Customers and Products entity sets to navigate to List-Detail page. In Main page, you will notice styling on action bar, tool bar, items (Logout) available on tool bar, Customers button.
Click Customers to navigate to Customer List. You will see that Title property has been styled.
Click any record to navigate to Customer Detail page. You will see that Object Header control has been styled.