In this tutorial you will learn how conditional formatting works and how to create styles on the example of a simple app, which changes color of the cell depending on the amount of discount.
1.Begin
1.a
Start with creating a new app with 2 widgets: a table and a spreadsheet.
1.b
You will need to change headers in your table by clicking on column options and filling 'header' field with a new name. Change names as shown:
1.c
Now mark first 3 columns as editable.
1.d
Click the 'allow add rows' option in all 4 columns.
1.e
Change 2 and 4 column type to currency, 1 to text and 3 to percentage.
2.Creating a new style
2.a
Now in a separate place you will create your new style. Go to your spreadsheet, choose A1 cell, write anything there and add changes as shown ( bold, italic, center the text and light green background colour):
2.b
To save your style click: 'save as' and name it 'Style_1'. Now you can choose it among other already existing styles.
2.c
Create two more styles the same way but changing the formatting a little bit. We will go for background colour change:
3.Using conditional formatting
3.a
Click the 'Final price' (D) column and in style options choose 'compute style using formula'.
3.b
In Spreadsheet visibility write: =false. This way it won't be visible when you run the app.
3.c
Fill two cells with 0.25 and 0.50 in your spreadsheet and set their type to 'percentage'.
3.d
In 'D' column in your table write: =B-B*C
3.e
Now in 'Style formula' field write an 'If' formula that will change color of the cell based on how big the discount on the final price will be.
=if(C>SECTION5.D2, 'Style_3',SECTION5.d1<C && C<=SECTION5.d2,'Style_2','Style_1' )
Sections and cells can be named differently in your app to the ones in the tutorial. Make sure you add the right ones to your formula.
3.f
Now you can test how your app works!
Cells should turn:
-green if the discount is lower or equal 25%
-blue if its between 25% and 50%
-orange if its higher than 50%
0 Comments