Skip to Content

Add Styling to an MDK App

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
jitendrakansalJitendra KansalNovember 24, 2022
Created by
October 4, 2022


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.

    1. Launch the Dev space in SAP Business Application Studio.

    2. 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.

    3. 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.


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

      Field Value
      MDK Template TypeSelect CRUD from the dropdown
      Your Project Name Provide a name of your choice. MDK_Styling is used for this tutorial
      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)
      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.

    5. 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 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 we have Enable Offline set to Yes, the generated application will be offline enabled in the MDK Mobile client.

    6. In Data Collections step, select Customers and Products. Click Finish to complete the project creation.

    7. 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.

    1. In MDK_Styling project, expand the Styles folder and open the Styles.less file.

    2. 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
      #LogoutToolbarItem  {
          color: brown;
      //// UploadToolbarItem is tool bar item for Sync in
      #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
        font-color: @mdkRed1;
        background-color: cyan;
      //// below snippet is to style Title property of an Object Table control in
      .ObjectTableTitle {
       color: @mdkYellow1;
      //// below snippet is to style Object Header control in
      /* 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.

    3. Save your changes to the Styles.less file.

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


    If you want to style 2 toolbar items with the same color, which syntax is correct?

    [ ] #UploadToolbarItem & #LogoutToolbarItem { color: #FFF4E6;}
    [x] #UploadToolbarItem, #LogoutToolbarItem { color: #FFF4E6;}
    [ ] Not possible to combine in a single expression



    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 to Customers section button control on
    • ObjectTableTitle to Title property of Object Table in
    • objectHeaderBodyText to BodyText property of Object Header in
    • objectHeaderDescription to Description property of Object Header in
    • objectHeaderFootNote to Footnote property of Object Header in
    • objectHeaderHeadline to HeadlineText property of Object Header in
    • objectHeaderBackground to ObjectHeader property of Object Header in
    • objectHeaderStatus to StatusText property of Object Header in
    • objectHeaderSubhead to Subhead property of Object Header in
    • objectHeaderSubStatus to SubstatusText property of Object Header in
    1. In the, select Customers button, click link icon next to Button property under Style.

      In Object browser, double click MyCustomerButton class to bind style property and click OK.

    2. Navigate to Pages | Customers, click, 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.

    3. Navigate to Pages | Customers, click, 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.

    1. Right-click and select MDK: Deploy.

    2. 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?

Back to top