Add Styling to an MDK App
- 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)
- Install SAP Mobile Services Client on your iOS or Android device.
Android!
iOS
(If you are connecting toAliCloud
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
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 Get Started page.
If you do not see the
Get Started
page, you can access it by typing>get started
in the center search bar. -
Select MDK Project and click Start.
If you do not see the MDK Project option check if your Dev Space has finished loading or reload the page in your browser and try again.
This screen will only show up when your CF login session has expired. Enter your login credentials, click Sign in. After successful signed in to Cloud Foundry, select your Cloud Foundry Organization and Space where you have set up the initial configuration for your MDK app and click Apply.
-
In Type step, select or provide the below information and click Next:
Field Value MDK Template Type
Select CRUD
from the dropdownYour Project Name
Provide a name of your choice. MDK_Styling
is used for this tutorialYour 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)
Choose a target folder
By default, the target folder uses project root path. However, you can choose a different folder path 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. -
In Service configuration step, provide or select the below information and click Next:
Field Value Data Source
Select Mobile Services
from the dropdownMobile Services Landscape
Select standard
from the dropdownApplication Id
Select com.sap.mdk.demo
from the dropdownDestination
Select SampleServiceV2
from the dropdownEnter 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 we have Enable Offline set to Yes, the generated application will be offline enabled in the MDK Mobile client.
-
In Data Collections step, select
Customers
andProducts
. 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.
-
- Step 2
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 theStyles.less
file. -
Copy and paste the following code.
LESSCopy@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 { color: @mdkYellow1; } //// below snippet is to style Object Header control in Customers_Detail.page /* Object Header - BodyText */ .objectHeaderBodyText { color: red; } /* Object Header - Description */ .objectHeaderDescription { color: blue; } /* Object Header - Footnote */ .objectHeaderFootNote { color: green; } /* Object Header - Headline */ .objectHeaderHeadline { color: #ff00ff; } /* Object Header - Background */ .objectHeaderBackground { background-color: #DC143C; } /* Object Header - StatusText */ .objectHeaderStatus { color: red; font-style: italic; font-size: 18; } /* Object Header - Subhead */ .objectHeaderSubhead { color: yellow; } /* Object Header - SubstatusText */ .objectHeaderSubStatus { color: blue; 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 inApplication.app
file.
If you want to style 2 toolbar items with the same color, which syntax is correct?
###Match
[ ] #UploadToolbarItem & #LogoutToolbarItem { color: #FFF4E6;}
[x] #UploadToolbarItem, #LogoutToolbarItem { color: #FFF4E6;}
[ ] Not possible to combine in a single expression
[VALIDATE_2]
[VALIDATE_2]
###Rule
single-choice
###Question
What is a main advantage of using Leaner Style Sheets (LESS) for styling apps? -
- Step 3
In this step, you will bind style classes:
MyCustomerButton
toCustomers
section button control onMain.page
ObjectTableTitle
to Title property of Object Table inCustomers_List.page
objectHeaderBodyText
toBodyText
property of Object Header inCustomers_Detail.page
objectHeaderDescription
toDescription
property of Object Header inCustomers_Detail.page
objectHeaderFootNote
toFootnote
property of Object Header inCustomers_Detail.page
objectHeaderHeadline
toHeadlineText
property of Object Header inCustomers_Detail.page
objectHeaderBackground
toObjectHeader
property of Object Header inCustomers_Detail.page
objectHeaderStatus
toStatusText
property of Object Header inCustomers_Detail.page
objectHeaderSubhead
toSubhead
property of Object Header inCustomers_Detail.page
objectHeaderSubStatus
toSubstatusText
property of Object Header inCustomers_Detail.page
In the
Main.page
, selectCustomers
button, click link icon next to Button property under Style.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?
- Step 4
So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, you will deploy the application definitions to Mobile Services and Cloud Foundry to use it in the Mobile client 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 client) followed by to Cloud Foundry (for Web application).
You should see successful messages for both deployments.
- Step 5
What is the class name being used to style the Customer button?