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 KansalAugust 5, 2022
Created by
jitendrakansal
September 27, 2019
Contributors
jitendrakansal
jitendrakansal

Prerequisites

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

MDK
  • 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 Welcome page.

      MDK

      If you do not see the Welcome page, you can access it via Help menu or via View menu > Find Command > Welcome.

    3. Select MDK Project and click Start.

      MDK

      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.

    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
      MDK

      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.

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

      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.

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

      MDK
    2. Copy and paste the following code.

      LESS
      Copy
      @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 */
      /* iOS Only */
      .objectHeaderBodyText {
        color: red;
      }
      
      /* Object Header - Description */
      /* iOS Only */
      .objectHeaderDescription {
        color: blue;
      }
      
      /* Object Header - Footnote */
      /* iOS Only */
      .objectHeaderFootNote {
        color: green;
      }
      
      /* Object Header - Headline */
      /* iOS Only */
      .objectHeaderHeadline {
        color: #ff00ff;
      }
      
      /* Object Header - Background */
      .objectHeaderBackground {
      background-color: #DC143C;
      }
      
      /* Object Header - StatusText */
      /* iOS Only */
      .objectHeaderStatus {
        color: red;
        font-style: italic;
        font-size: 18;
      }
      
      /* Object Header - Subhead */
      /* iOS Only */
      .objectHeaderSubhead {
        color: yellow;
      }
      
      /* Object Header - SubstatusText */
      /* iOS Only */
      .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 Application.app file.

      MDK

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

  • Step 3

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

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

      MDK
    3. Navigate to Pages | Customers, click Customers_Detail.page, select Object Header control, scroll-down to Style section and bind control properties to style properties.

      MDK
      MDK

    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 Application.app and select MDK: Deploy.

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

      MDK

      You should see successful messages for both deployments.

      MDK
  • Step 5

    What is the class name being used to style the Customer button?

Back to top