MDK Styling

[#1]

Hi All,

I have few requirements in MDK Styling. There are few references on Internet but not what I am searching for. My requirements are :

1.How do I set alternate rows with different color i.e. Odd rows to be gray and even rows to be white? I have used Object table and simple property as a component .

2.How do I apply an image to an entire page ?

3.How do I apply an image to leftover section of a page?

4. Is there any way to change the entire theme of MDK ?

5.Any more MDK styling references apart from that on Internet is highly appreciable.

Thanks,

Aarti Singh.

[Jitendra_Kansal]

aartsingh covering individual controls (wherever supported).
For example:

[former_member729346]

Ok.

Leftover section as in I have a page with just 1 row in object table. The remaining page is blank. How do I set an image to the blank section.

Also is there any reference to use Extension page and bind it to the main page for image to appear?

Are the themes built by MDK itself or we need to configure it seperately ?

Thanks,

Aarti Singh,

[Jitendra_Kansal]

aartsingh

Leftover section as in I have a page with just 1 row in object table. 
The remaining page is blank. How do I set an image to the blank section.

You would need to create an extension as native view to display an image.

Also is there any reference to use Extension page and bind it to the main page for image to appear?

For an extension on a full page or image extension in a remaining page, i suggest you to look at this tutorial as a reference guide.

Are the themes built by MDK itself or we need to configure it seperately ?

You need to have multiple .less files for different kind of themes and you can switch between them at runtime.
e.g. in my test app, i have 3 LESS files - Black, Red and Styles.

i can provide whatever styling i want to have in the app when user switch to either theme at runtime. (i showed ActionBar in the Red/Black when switching to Red/Black theme)

context.getTheme() will return the current theme applied to the app (by default this would be Styles)
context.getAvailableThemes(): will return the available themes - in above example, it will be Black, Red and Styles.
Once you choose any of the available theme, you can then set the theme via setTheme clientAPI.

[boghyon]

jitendrakumar.kansal Thank you for the answer. About the 4th question; will MDK ever be supported by UI Theme Designer? AFAIK, NativeScript is quite limited when it comes to styling, compared to styling with plain CSS for the web.

[Jitendra_Kansal]

boghyon.hoffmann

UI Theme Designer doesn't currently support MDK as an output target, we'll look into this for a possible future release.

[former_member729346]

jitendrakumar.kansal bill.froelich

Is it possible to change background color of Image Cell Item? When we use this element in android , the item appears in a square which does not blend with the background color .

[Jitendra_Kansal]

aartsingh property (font-size and color).

[former_member729346]

jitendrakumar.kansal bill.froelich

I have applied a CSS for Action bar with background color as dark blue and text color as white . I have a page with object table and search enabled set as true . By default , the text that we type on search bar appears black but due to css, it appears white and its invisible because the css for background color that should be blue doesnt apply. Is there any solution to it ?

[Jitendra_Kansal]

aartsingh

Could you share with the style snippets (and device screenshots if possible) what behaviors you are experiencing?

[former_member729346]

jitendrakumar.kansal

I have attached the snippets. As you can see, the page color is supposed to appear as blue which is fine in android but in iOS, it appears to be white. Also the title value background is greyish in android but appears as yellow in iOS.

Style.less :

Android :

iOS :

[Jitendra_Kansal]

aartsingh

Attachements are missing in your last comment

[former_member729346]

Is there any size limit?

[Jitendra_Kansal]

You meant attachment? i think 1 MB

[DaviCastro]

@Jitendra_Kansal Do you have a step-by-step guide for styling in SAP MDK? I apply CSS in the `.less` file; it works correctly on the web, but there is no effect on Android or iOS. I have a button with a custom style I created—I managed to get a button to have a green background on Android using that class—but when I copy and paste it to create an identical new custom class and apply it to another button, it doesn't turn green on Android.

[Jitendra_Kansal]

@DaviCastro Could you please post a new question describing your issue? Please also share the page schema and a style example showing how you’re trying to style the page.