Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Karol-K
Advisor
Advisor
0 Kudos

Purpose

tips how to paint with design studio:

* a line

* a square

* a round

Preparation

You need empty application with a panel of your wished size - the size is important as you need later to position the components via coordinates. I call the panel PANEL_CONTENT.

Decide if you want to paint from top-left or bottom left. Dependent on this decition, you have to use:

  • setTopMargin() and set LeftMargin()

or

  • setBottomMargin() and set LeftMargin()

for positions of all components.

Painting a Line

Position a new Panel in PANEL_CONTENT at your coordinates. Assign the CSS class (which you have to define in your css file) which fulfills the purpose: eg. content-line.

css


.content-line {
  border-top: 1px solid #cccccc;
}

Painting a Square

Position a new Panel in PANEL_CONTENT at your coordinates. Assign the CSS class (which you have to define in your css file) which fulfills the purpose: eg. content-square.

css


.content-square {
  border-top: 3px solid black;
  background-color: red;
}

Painting a Round / Circle

Position a new Panel in PANEL_CONTENT at your coordinates. Assign the CSS class (which you have to define in your css file) which fulfills the purpose: eg. content-red-80.

css


.content-red-80 {
  width: 80px;
  height: 80px;
  border-radius: 40px 40px 40px 40px;
  border: 1px solid #cccccc;
  background-color: red;
}

Example

By such tricks you can paint whatever you want, eg...

Manual Data Binding

of course, you can read any data value from DataSource with the function getData() and move the elements by changing the top/bottom and left margins. Buttons in the referenced application are showing how.


PANEL_SQUARE.setBottomMargin(PANEL_SQUARE.getBottomMargin()+ 60);


Apllication as Example

Download your application from GitHub:

I hope you have fun with this content.

3 Comments