Skip to content

Customizing the Application's Appearance

Note

This tutorial presupposes what done in Building Your First App: Personal Budget tutorial. If you have missed or skipped the previous tutorial or you want to experiment and go back, do not worry! You can import this .eap file to sync or restore with what you see in this documentation. Learn about resetting by using .eap files. If you don't use the .eap, what you see might differ slightly from the screenshots.

The application Personal Budget works fine at this stage.

But you can customize Personal Budget and improve it to obtain the following more pleasant result.

You will learn to customize the appearance of your application: cell format, columns layout, colors, headers, and descriptions.

What is the Design Mode?

You will receive a brief introduction to Design Mode and how to access the Design Mode panel.

Design Mode is the interface that enables eLegere users to customize appearance, functionalities, and restrictions of an application without any knowledge of coding.

This is how Design Mode for Personal Budget appears. Read afterwards to learn how to enter the Design Mode.

You can access Design Mode in two ways.

From the Home

You can access the Design Mode by clicking on the Go to Design Mode icon () on an application's tile.

Inside Design Mode, clicking on the upper-left corner the GO button forwards to the application.

From an Application

If you are inside an application, you can access the Design Mode by clicking on Design Mode button () on the upper-right corner. The action opens the Design Mode in a new browser tab.

Hint

A good practice is keeping one browser tab with the application open and one tab with Design Mode open. Enter the application and click on "()" to enter Personal Budget's Design Mode.

You can keep both Design Mode and the application opened at the same time. In this way, you can reload and see the changes made on the application without leaving the Design Mode.

Help

If you see the top bar orange instead of black color, you can't edit the application. Check the reason here.

Add the Euro (€) Symbol to the Value field

You will learn to format Numeric values in the table cells automatically. Also, you will learn that different field types have different format options.

The columns of the table display just the data as they are recorded on the Storage. For example, in BudgetValue you can insert just a number without any other symbol.

Formats enables to represent data in multiple ways. For instance: writing a number with decimals and the "$" symbol.

The field BudgetValue should display the Euro (€) symbol and format the decimals' comma automatically through the Format. You can do this by using the Format options available.

  1. Under the View Format column, click on the drop-down list for the BudgetValue field.

  2. Scroll and choose 1,234.00 €.

  3. Click on the Save button () to save the change.

Danger

Be careful when closing the Design Mode browser tab. Do not close Design Mode before verifying that all the changes are saved. You will lose any changes not saved when closing Design Mode.

The BudgetValue field will format decimals and currency symbol automatically.

Attention

The Format change affects all the cells of the column.

You can do the same operation with BudgetDate and BudgetTime to customize their format.

Attention

If you leave the BudgetDate and BudgetTime without any format, pay attention when inserting data. If you don't insert the data according to the default format, the table won't record the data in the cell. E.g. BudgetTime with the 18:00:00 format requires to insert the seconds as well or the field won't record the date.

The Master table will reflect the format choices.

Arranging the Table Columns

You will learn to customize the order of the columns in the application's table.

  1. From Personal Budget's Design Mode, click on the Layout tab on the left taskbar.

    You will land on the Layout sub-panel of Design Mode. Here you can arrange as you wish the table's columns.

  2. From the top to the bottom, arrange the table columns by clicking on the icon and dragging in the desired position. Drag & Drop as follows:

    • BudgetName
    • Notes
    • BudgetValue
    • BudgetTime
    • BudgetDate

  3. Click on the Save button () on the upper-left corner of Design Mode.

The master table will reflect the changes.

Changing Color and Text of Table Headers

You will learn to customize text and colors of the column headers.

Changing Headers' Text

In Design Mode, you can customize the titles of the fields' headers.

You can change the headers' text from the Master sub-panel.

  1. Click on the BudgetName field's textbox under Name column.

  2. Type Name as header's name for the field BudgetName

    Moving the cursor over the textboxes makes appear the buttons to restore the fields' name and clear the labels.

    • If you want to restore the original Storage name of the field, click on the Restore Physical Name icon (). The textbox will display the same name that the field has in the Storage.

    • If you want to restore the last name used for the field, click on the Restore Last Name icon ().

    • If you want to clear the textbox, click on the Clear field icon ().

  3. Save any change through the Save button () on the top bar.

The Master table will display the new name on the corresponding table header.

Note

Changing the name of a field in Design Mode modifies only the header's text. The application does not change the fields' names on the Storage.

Rename the rest of the fields as follows:

  • BudgetName Name
  • Notes Notes
  • BudgetValue Value
  • BudgetTime Time
  • BudgetDate Date

Info

There is no need for the Master table to show the Identity field IdBudget. IdBudget should be invisible and assigns an unique Id number to identify the row. No need to change the displayed name for IdBudget.

At this point, the Master table should look like the following screen:

What are System Fields?

You have noticed that there are additional fields besides the Transactions Storage fields.

The fields above are System Fields that eLegere creates for each application. System Fields record information about the application and the entries.

eLegere hides the System Fields by default.

Note

Ignore the System Fields for the time being. They have no use for this User Guide.

Danger

Do not touch System Fields, unless you are an expert user knowing what you are doing.

Changing Headers' Colors

You will learn to customize the colors of the table headers.

You can customize the table header colors from the Layout sub-panel.

  1. In Design Mode, click on the Layout button on the left taskbar.

  2. Click on the Header Bg Color button next to the corresponding table header.

  3. A window that enables to customize the color will appear. Choose the color your prefer from the list or the color palette next to the list.

  4. Click on the Confirm button.

  5. Click on Save () on the top bar.

The Master table will color the header with your color of choice.

Choose a color for the rest of the headers.

Hint

Group the fields by using the same header background colors. For example: use one color for fields recording general info (e.g. Name); one color for fields storing info about price; one color for fields about date and time. Dividing headers using colors makes easier to identify the headers in the Master table.

At this point, the Master table should look like the following screen:

Preview in Layout Sub-Panel and Advanced Settings

As alternative to saving and entering the application to see the result, you can preview the changes in the Layout sub-panel.

Click on Toggle Advanced Settings on the upper-right corner of the Layout sub-panel.

A new section will appear with further customization options and the preview of the headers and cells appearance.

The Layout's Advanced Settings have the following options:

  1. Row Height Sets the size of the table cells.

  2. Order Field Establishes the field to order the entries.

  3. Order Type Chooses the Ascendant/Descendent order for the Order Field.

  4. Column Word Break Adapts the cell and starts a new line if the text is too long.

  5. Row Colors Enables to choose colors for the whole row and the cell's text.

Add Field Descriptions

You will learn to add Field Descriptions. Field Descriptions are suggestions about what data the column can store or calculate.

The Master table shows the Field Description of each field through a tooltip. The tooltip appears when the user moves the mouse pointer on the header and leaves it for a few seconds.

  1. In Design Mode, click on Field Descriptions in the left taskbar.

  2. You will access the Field Descriptions sub-panel. Type the fields' descriptions in the textbox corresponding to the field.

    Type the following texts in the following textboxes:

    • Name: Reason or description for the expense or the credit.
    • Value: Record the expenses as negative values (-20). Record the credits or income as positive without the minus (1000).

    Leave the other Field Descriptions empty. It is clear what data their fields record and how.

    !!! hint It is not mandatory to add a Field Description for each field. If the Field Descriptions remains empty, the application display the column's name in the tooltip.

  3. Click on Save () on the top bar to save the changes.

When the user moves the pointer on the header, the tooltip displays the Field Description.

Dynamic Values and Colors

You will learn to introduce automation in your app through Formulas. The examples include:

  • How to change color cells according to the value.
  • How to calculate the current date automatically.
  • How to calculate the current time automatically.

Changing the Table Cells Color according to the Value

Like the Column headers, you will learn to change table cells colors. As well, how make the cell changing colors according to the value stored.

You can decide the color of columns' table cells. Also, you can program the behavior of a table cells to change color according to the value stored.

Formulas are powerful tools of eLegere: they automate multiple tasks and behaviors of the Master table and other functions.

Hint

You do not have to learn about Formulas at this stage. Focus instead on understanding what Formulas can do for you. Formulas are discussed later in Automate your Application and the Formulas reference.

You can customize table cells' colors and their behavior in the Design Mode's Layout sub-panel.

Suppose that you want Personal Budget to highlight the cells of Value column as follows: - Green if the value is positive (Income). - Red if the value is negative (Payment). - Gray if the value is left 0.

  1. In Layout, click on the Cell Bg Color button corresponding to the Value column.

  2. The Color Settings for Value window will appear. Click on the Set Formula button. The actions opens the Formula Editor.

  3. The Formula Editor enables the user to compose formulas and automate different parts of eLegere.

    Copy & paste the Formula below:

    1
2
3
4
5
6
7
8
9
    =IF(
=LT($CURRENTSTORAGE.BudgetValue; 0); 
"red";
     =IF(
          =GT($CURRENTSTORAGE.BudgetValue; 0); 
               "green"; 
               "gray"
       )
 )

    The formula checks if the cell value is lower than 0.

    • If lower than 0, the formula colors of red the cell.

    • If higher than 0, the formula colors of green the cell.

    • If the value is 0, the formula colors of gray the cell.

  4. After having copied & pasted the formula in the editor, click on the Confirm button.

  5. Click on Save () on the top bar to save any changes.

Now the cells of Value change color according to value recorded.

To improve readability, change the formula's colors with their lighter versions. You can change the formula's colors using Hex codes as well. Replace in the formula the color names with the Hex codes of the lighter versions of green and red.

  • red -> Light Red: #f88379

  • green -> Light Green: #cefad0

    1
2
3
4
5
6
7
8
9
    =IF(
=LT($CURRENTSTORAGE.BudgetValue; 0); 
"#f88379";
     =IF(
          =GT($CURRENTSTORAGE.BudgetValue; 0); 
               "#cefad0"; 
               "gray"
       )
 )
    The result is the following:

Hint

The Formulas that you can insert in the Color Settings windows in the Layout panel support HTML, Hexadecimal colors, RGB, and RGBA to specify a color.

Insert Expense Date Automatically

You will learn to calculate default values within the table cells by taking as example a Date field.

Formulas can determine the default values of a column's cell when the user adds a new entry.

Suppose that Personal Budget must insert the current date in the Date column field automatically.

  1. In Design Mode, click on the Formula tab on the upper right-corner of the Master sub-panel.

  2. The Formula tab of Master enables you to insert formula for values of fields.

    Under the Default Value column in correspondence of the Date field, click on the Create default value formula button (). The action opens the formula editor for the default value.

  3. In the formula editor that appears, copy & paste the following formula variable: 

    1
    $CURRENTDATE
    The formula variable $CURRENTDATE takes the current date from the system automatically.

  4. Click on the Confirm button. The Create default value formula button () becomes blue: it means that a formula calculates the value of Date automatically.

  5. Click on Save () on the top bar to save the changes.

Now, every time the user adds a new entry in Personal Budget, the application fills the Date field with the current date by default.

If you want to record a different date, click on the cell and modify the value.

You can automate the default value of the Time column in the same way.

  1. In Design Mode, click on the Formula tab on the upper right-corner of the Master sub-panel.

  2. Click on the Create default value formula button () for Time. The action opens the formula editor for the default value.

  3. In the formula editor that appears, copy & paste or type the following formula variable: 

    1
    $CURRENTTIME
    The formula variable $CURRENTIME takes the current time from the system automatically.

  4. Click on the Confirm button. The Create default value formula button () becomes blue: it means that a formula calculates the value of Time automatically.

  5. Click on Save () on the top bar to save the changes.

Congratulations, you have learnt how to customize your eLegere Application!

Success

The next step will be learning about Lookups: cells with a list of options to choose a value from. Lookups enable you to configure table cells with a default lists of values.