~~NOTRANS~~

~~Title: Renewing oil application~~
Version: 5.6 / 2022-06-01

====== Introduction ======

This tutorial contains step-by-step instructions for creating the "Renewing Oil Application" that is available in the VisionX solutions store in the "Demo Applications" category. It is assumed that a VisionX project is already available. If you have not created an application yet, please refer to [[:visionx:getting_started|the VisionX documentation "Getting Started"]] for details.

**You should install the [[:visionx:addon_csvimport|CSV Import AddOn]], which will be later needed.**

====== Creating Customers, Suppliers and Producers screens ======

**We will create the Customers screen together and you can make the other screens, Suppliers and Producers with this steps on your own.**

First we need to create a screen in VisionX. Press the "New Screen" button, enter a title for the screen and click "Next".

{{:visionx:renewing_oil_application:renewingoil-create-workscreen.png?nolink|Creating a workscreen}}

On the next step, select "Table with detail form" and "Universal layout". Click "Next".

{{:visionx:renewing_oil_application:renewingoil-choose-layout.png?nolink|Selecting an Application screen with table with detail form}}

On the next step, select "Take data from a spreadsheet" and click "Next".

{{:visionx:renewing_oil_application:renewingoil-choose-datasource.png?nolink|Choosing to take data from spreadsheet}}

In this screen, we paste the following string of data to create the table and press "Next". This list could be copied from an existing customers, suppliers or producers list as well.

<code>
Customer;Country;ZIP;City;Address
Oily Rich corp.;USA;77494;Katy;Notsure Street 1
Refined Oil GmbH;Germany;80331;München;Mustermann Straße 1
Vision Oil corp.;USA;93504;California City;Xavier Ave 1
Grease;Greece;10431;Athen;Athinas
Öl Käufer AG;Austria;1100;Wien;Wolfgang Straße 23
OIL corp.;Australia;3000;Melbourne;Guests Ln
Renewable Ways;Spain;8001;Barcelona;Rambla dels Estudis 113
Prince Oil;Saudi Arabia;12341;Riyadh;AlUrabuh
Oil Investment;Russia;125009;Moscow;Mokhovaya St
GreenPoint Oil;Italy;80138;Naples;Via dei Tribunali 32
</code>
On the next screen, under "Options" on the right side, we select "First row contains labels" and choose ";" as the delimiter for our data.

{{:visionx:renewing_oil_application:renewingoil-import-options.png?nolink|Import options}}

For the last step, we just change the table name to "Customer" and leave everything else as it is. After pressing "Finish" our customer table is created and already has data in it. Click "Finish" to finalize creating the screen.

{{:visionx:renewing_oil_application:renewingoil-customer-table-fields.png?nolink|Customer table column}}

We are now greeted by our screen.

{{:visionx:renewing_oil_application:renewingoil-finished-customer-screen.png?nolink|Finished customer screen}}

**Creating a screen for the customers, suppliers and producers tables requires the same steps the only difference is importing a different spreadsheet and changing the table name. Now we have to do the same steps for the suppliers and producers screens.**

Here are the .csv files for the suppliers, producers and customers tables:

  * [[https://doc.sibvisions.com/_media/visionx/renewing_oil_application/renewingoil_customer.csv|Customer.csv]] file
  * [[https://doc.sibvisions.com/_media/visionx/renewing_oil_application/renewingoil_producer.csv|Producer.csv]] file
  * [[https://doc.sibvisions.com/_media/visionx/renewing_oil_application/renewingoil_supplier.csv|Supplier.csv]] file

====== Creating Production, Sales and Deliveries screens ======

**We will make the "Deliveries" screen together and then you can create the other screens, "Production" and "Sales" on your own with the exact same steps.**

The first two steps are just like the first steps for the previous screens. Press the "New Screen" button, enter a title for the screen and click "Next".

On the next step, select "Table with detail form" and "Universal layout". Click "Next".

After that, select "Define the information you want to manage" and click "Next".

{{:visionx:renewing_oil_application:renewingoil-define-table.png?nolink|Selecting the data source}}

We can now define the table for our deliveries. We are going to create six columns: supplier, producer, amout, price, date and sum.\\
The columns supplier and producer are comboboxes and we are using the tables supplier and producer. This two tables should be imported by now, after the Supplier and Producer screen was created.\\
The labels of the comboboxes must have the same name as the column name in the spreadsheet. For example, in the spreadsheet the columnname is "Supplier" and the label of the combobox should be "Supplier" as well.\\
Note that VisionX guesses the datatype for each column based on the column label, but we can always adjust it using the dropdown in the "Datatype Name" column. Click "Finish" to finalize creating the screen.

{{:visionx:renewing_oil_application:renewingoil-table-defined.png?nolink|Defining our data}}

We are now greeted by our screen.

{{:visionx:renewing_oil_application:renewingoil-deliveries-screen.png?nolink|Deliveries screen done}}

In this case the table is empty, because we only defined the table and haven't imported any data yet.\\
**First create the other two screens as well, the Production and Sales screens, the same way as the Deliveries screen was created.\\
Then the data can be entered manually or imported using the CSV Import Add-On.**

Here are the csv files with the production, sales and deliveries data.

  * [[https://doc.sibvisions.com/_media/visionx/renewing_oil_application/renewingoil_sold.csv|Sales.csv]] file
  * [[https://doc.sibvisions.com/_media/visionx/renewing_oil_application/renewingoil_produced.csv|Production.csv]] file
  * [[https://doc.sibvisions.com/_media/visionx/renewing_oil_application/renewingoil_delivered.csv|Deliveries.csv]] file

====== Importing Production, Sales, Deliveries data ======

You should see one of the screens, Production, Sales or Deliveries and open the screen in preview mode. To do that click on "Preview".

{{:visionx:renewing_oil_application:renewingoil-preview-button.png?nolink|Clicking the Preview button}}

After clicking the "Preview" button, a new page should have oppened itself in your browser and you should see the login page.

{{:visionx:renewing_oil_application:renewingoil-web-login.png?nolink|After clicking the preview button}}

Next login with your username and password, if you haven't changed the default user, then the username and password should be admin and admin. Then open the "Deliveries" screen and next to the search bar there is a button with 3 lines, click on the button and you can see 3 options, Delete, Import and Export.

{{:visionx:renewing_oil_application:renewingoil-import-button.png?nolink|Import, delete and export}}

Click on the Import option and you should see this pop-up screen.

{{:visionx:renewing_oil_application:renewingoil-import-button-screen.png?nolink|Import pop-up screen}}

Depending on the screen, which you have open, you should choose the corresponding csv file. I have the deliveries screen open, that is why, I am importing the Deliveries data and copy, paste the following string of data:

<code>
Supplier;Producer;Amount;Price;Date;Sum
Planet Express;Oil Refinery;1243000;15,34;28.05.2019;19067620
Fake Restaurant;Fine Oil;11030888;8,34;23.01.2019;91997605,92
Transport Company;New Oil;1560000;23,87;12.07.2017;37237200
Quick Meals;New Oil;1900000;34,89;11.10.2017;66291000
Supa Delivery;Produktion Öl;3942000;7,45;23.09.2020;29367900
Mate Shipping;Make Oil Fine Again;1000000;8,12;08.02.2020;8120000
Rainforest Express;Oil Refinery;886200;9,56;19.02.2020;8472072
Rainforest Express;New Oil;2000000;4,23;14.03.2021;8460000
Pharaoh Delivery;Oil Refinery;8953000;17,89;12.07.2021;160169170
Beer and Sausages;Oil Refinery;923400;67,34;12.01.2022;62181756
</code>
{{:visionx:renewing_oil_application:renewingoil-import-deliveries.png?nolink|Pasted delivery data}}

After clicking the Import button, you should see the following screen with the message "The import finished successfully".\\
After the import finished, click on the OK button.

{{:visionx:renewing_oil_application:renewingoil-import-successfully.png?nolink|Pasted delivery data}}

**This steps should be repeated with the other two screens.**

====== Creating the Dashboard screen ======

Starting point is the same, you click on the "New Screen" button, give it a title. And we choose "Dashboard" as the layout and click on the "Finish" button.

{{:visionx:renewing_oil_application:renewingoil-dashboard.png?nolink|Renewing Oil Dashboard}}

After clicking the "Finish", you should see the following screen. The screen only shows default values.\\
The default dashboard contains a table, a bar chart, a line chart, two KPIs and a ring chart.

{{:visionx:renewing_oil_application:renewingoil-default-dashboard.png?nolink|Dashboard default look}}

First we have to add the tables, so that we can bind data to the elements. **We will add the first table together and other tables can be added using the same steps.** To add the first table, click on the green plus button in the bottom area.

{{:visionx:renewing_oil_application:renewingoil-add-new-table.png?nolink|Adding data for dashboard}}

On the next screen choose "Use existing data from database tables".

{{:visionx:renewing_oil_application:renewingoil-dashboard-data.png?nolink|Choose data for dashboard}}

On the next screen choose "Use application Database Connection".

{{:visionx:renewing_oil_application:renewingoil-dashboard-datasource.png?nolink|Choose datasource for dashboard}}

Finally, we choose the database table, which should be added and then click "Finish"

{{:visionx:renewing_oil_application:renewingoil-dashboard-table.png?nolink|Choose table for dashboard}}

**For the dashboard, we have to add the Deliveries, Sales and Production tables.**

After adding all the necessary tables, we can bind data to the charts, table, KPIs.

We beginn with the table element in the top right area.\\
Open the customizer of the table element.

{{:visionx:renewing_oil_application:renewingoil-dashboard-edit-table.png?nolink|Edit table element}}

Under "Binding" you see a combobox, from the combobox choose "[Sales]" and the table element shows the data from the Sales table.

{{:visionx:renewing_oil_application:renewingoil-dashboard-table-bound.png?nolink|Table bound to Sales}}

After binding the Sales table to the table element, we change the title.\\
Double click on the text "Title" above the table element and write "Sales" instead.

{{:visionx:renewing_oil_application:renewingoil-dashboard-rename-table.png?nolink|Rename title above table}}

Now we will change the line chart under the table element. Open the customizer of the line chart and set the "Binding" to "[Produced]", then close the customizer.

{{:visionx:renewing_oil_application:renewingoil-bind-line-chart.png?nolink|Bind data to line chart}}

Reopen the customizer of the line chart and set "Output Amount" as the Y-Columns and set "Input Amount" as the X-Column.

{{:visionx:renewing_oil_application:renewingoil-line-chart-set-data.png?nolink|Set data to line chart}}

Now we have a nice line chart, which shows us, how much fuel was produced from X amount of used oil.\\
That is what we are going to set as our title for our line chart. If you closed the customizer, please open it again and copy/paste this text "How much fuel was produced from X amount of used oil" into the title.

{{:visionx:renewing_oil_application:renewingoil-line-chart-title.png?nolink|Set title of line chart}}

And finally we will set the labels of the X-Axis and the Y-Axis. In the customizer write into the X-Axis field "Output amount in Liter" and into the Y-Axis field "Input amount in Liter".

{{:visionx:renewing_oil_application:renewingoil-line-chart-label.png?nolink|Set labels of line chart}}

As the last step, change the text "Title" above the line chart to "Production".

{{:visionx:renewing_oil_application:renewingoil-line-chart-above-title.png?nolink|Set title above the line chart}}

We are finished with the line chart, now we are going to setup the bar chart. First, we are binding the Deliveries data to the bar chart.

{{:visionx:renewing_oil_application:renewingoil-bar-chart-bind.png?nolink|Bind data to bar chart}}

After setting the "Binding", close and reopen the customizer, and as the X-Columns set the "Supplier" and as the Y-Columns the "Amount".

{{:visionx:renewing_oil_application:renewingoil-bar-chart-set-data.png?nolink|Set X and Y axis of the bar chart}}

The bar chart shows us now, how much used oil the different suppliers delivered, that is why, we are going to set the title of the bar chart to "How much used oil did the different suppliers deliver".

{{:visionx:renewing_oil_application:renewingoil-bar-chart-title.png?nolink|Set title of the bar chart}}

Now we set the labels of the X and Y Axis, the X-Axis is the "Suppliers" and the Y-Axis is the "Amount in Liter".

{{:visionx:renewing_oil_application:renewingoil-bar-chart-xy-labels.png?nolink|Set the X and Y labels of the bar chart}}

Finally we change the text "Title" above our bar chart to "Deliveries".

{{:visionx:renewing_oil_application:renewingoil-bar-chart-title-above.png?nolink|Change title above bar chart}}

We are finished with the bar chart.\\
Now we start working on the ring chart, first we bind the Sum column from the Sales table to the ring chart, the same way as we bound the Sales table to the table element and change the title to "Profit".

{{:visionx:renewing_oil_application:renewingoil-ring-chart-bind.png?nolink|Bind data to ring chart}}

We change a few other things on the ring chart, open the customizer and change the "Style" to "Flat" and set "Max Value" to 1000000.

{{:visionx:renewing_oil_application:renewingoil-ring-chart-other-settings.png?nolink|Style the ring chart}}

We change the last two elements, the two KPIs next to the ring.

{{:visionx:renewing_oil_application:renewingoil-change-kpis.png?nolink|Edit KPIs}}

First we change the upper KPI, we set the title to "Sales volume", change the text "Unit" to "Liter" and "Description" to "Amount of sold fuel".

{{:visionx:renewing_oil_application:renewingoil-upper-kpi-change-text.png?nolink|Edit upper KPI's text}}

After that we bind the "Value" to "Sales.Amount".

{{:visionx:renewing_oil_application:renewingoil-upper-kpi-bind-data.png?nolink|Bind data to upper KPI}}

Then we change the lower KPI, we change the title to "Sales price", set the "Unit" text to "€/Liter" and "Description" to "Price of the sold fuel".

{{:visionx:renewing_oil_application:renewingoil-lower-kpi-change-text.png?nolink|Edit lower KPI's text}}

Finally we bind the "Value" to "Sales.Price" and our dashboard is finished.

{{:visionx:renewing_oil_application:renewingoil-lower-kpi-bind-data.png?nolink|Bind data to lower KPI}}

====== Creating the form screens for adding Suppliers, Producers and Customers ======

**We create one screen together and you will make the other two screens on your own.**

It is really easy to make a screen with a form. You start with clicking on the "New Screen" button and enter a title for the screen, we will call the screen "Add supplier". Then click on "Next".

{{:visionx:renewing_oil_application:renewingoil-create-form-screen.png?nolink|Create form screen}}

On the next page, choose the "Form" layout and click on "Next".

{{:visionx:renewing_oil_application:renewingoil-form-layout.png?nolink|Choose form layout}}

On the next page, we will choose our data source. We will use an existing data from database tables.\\
Choose the option "Use existing data from database tables" and then click "Next".

{{:visionx:renewing_oil_application:renewingoil-form-layout-data-source.png?nolink|Choose data source for form layout}}

On the next page leave the settings as they are and click on "Next".

On the last page, choose the "Supplier" table as our data source and click on "Finish".

{{:visionx:renewing_oil_application:renewingoil-form-choose-supplier.png?nolink|Choose Supplier table for form layout}}

We are now greeted by our form screen.

{{:visionx:renewing_oil_application:renewingoil-finished-form-screen.png?nolink|Finished form screen}}

We are finished with the screen, but there are some changes that we want to make.\\
We want the screen to open as a pop-up screen. To do that, we have to open the customizer of the screen and there is an option "Show as Popup". We have to enable it.

{{:visionx:renewing_oil_application:renewingoil-form-as-popup.png?nolink|Enable pop-up form screen}}

Now we are finished with the "Supplier" form screen.\\
**To create the "Customer" and the "Producer" form screens, the same steps are required, the only differences is the title of the screen and the data source table.**

====== Creating the report page and a report ======

We will now create the last screen for our application. Same beginning as before, click on "New Screen" and enter the title of the screen.\\
We will call this screen "Producer report" and then click "Next".

{{:visionx:renewing_oil_application:renewingoil-report-screen-title.png?nolink|Create report screen}}

On the next page, we choose the "Table" layout and then click on "Next".

{{:visionx:renewing_oil_application:renewingoil-report-table-layout.png?nolink|Use table layout for report screen}}

For the report, we use the already existing tables, so choose the option "Use existing data from database tables" and click on "Next".

{{:visionx:renewing_oil_application:renewingoil-report-existing-data.png?nolink|Use existing data for report screen}}

On the next page just click "Next".

{{:visionx:renewing_oil_application:renewingoil-report-app-db.png?nolink|Use app database for report screen}}

For the report screen, we add the "Producer" table as our first one and click on "Finish".

{{:visionx:renewing_oil_application:renewingoil-report-producer-table.png?nolink|Add Producer table for report screen}}

After clicking "Finish" we are greeted by our screen for the report, which we have to adjust a bit to our needs.

{{:visionx:renewing_oil_application:renewingoil-report-finished-screen.png?nolink|Finished report screen}}

First we delete the two buttons next to the search bar.

{{:visionx:renewing_oil_application:renewingoil-report-remove-buttons.png?nolink|Remove buttons next to search bar}}

After deleting those two buttons, we add a new button and change the text to "Get producer report".

{{:visionx:renewing_oil_application:renewingoil-report-get-producer-button.png?nolink|Add get-producer button next to search bar}}

Now we add all the other necessary tables, "Produced", "Deliveries" and "Sales".\\
We add them the same ways, as we did it at the dashboard screen.\\
Click on "New Table", then on the green plus.\\
After adding the other 3 tables, you should see all thise 4 tables at the bottom.

{{:visionx:renewing_oil_application:renewingoil-report-add-other-tables.png?nolink|Tables added for the report screen}}

We have to set the master table of the 3 tables, "Produced", "Deliveries" and "Sales". Click on the tab "Produced" and then on the pencil icon.

{{:visionx:renewing_oil_application:renewingoil-report-pencil-icon.png?nolink|Report screen, change Produced table}}

After clicking on the pencil icon, you should see this screen.

{{:visionx:renewing_oil_application:renewingoil-report-edit-table.png?nolink|Report screen, edit table screen}}

Click on "More..." to see more editing functions.

{{:visionx:renewing_oil_application:renewingoil-report-edit-table-more.png?nolink|Report screen, edit table screen}}

We are going to set the "Master Table" to the "Producer" table and then click on "Finish".

{{:visionx:renewing_oil_application:renewingoil-report-set-master.png?nolink|Report screen, set Master table}}

**We have to set the Master table for the "Sales" and "Deliveries" table.**

====== Adding functionality ======

After creating all the screens and adding data to the screens, we are going to add some extra functions.

===== Setting current date and calculating sum automatically =====

We begin with a simple calculation and how to set a default date.

I will show it on the "Deliveries" screen and the changes can be made on the "Production" and "Sales" screen later.

Open the "Deliveries" screen and open the customizer of any input field and at the bottom, you can see some pre-defined events.

{{:visionx:renewing_oil_application:renewingoil-functionality-events.png?nolink|Deliveries screen events}}

Click on "Create Row Value Changed", because we want the event to take place, when the value has changed.

{{:visionx:renewing_oil_application:renewingoil-row-value-change-event.png?nolink|Deliveries row value changed event}}

After clicking on the button, you should see the following screen.

{{:visionx:renewing_oil_application:renewingoil-row-value-change-screen.png?nolink|Deliveries row value changed event}}

We want to add some actions, so click on the "Action" tab, then you can see a combobox with pre-defined actions. We can add conditions and there is even a repeat option.

{{:visionx:renewing_oil_application:renewingoil-action-tab.png?nolink|Action tab}}

From the combobox choose the action "Set current date" and we want to write the current date into "Deliveries.Date".

{{:visionx:renewing_oil_application:renewingoil-set-current-date.png?nolink|Set current date action}}

From the lower combobox, which was just added after, choose "Calculate value", we want to write the result to "Deliveries.Sum" and the formula is "[Deliveries.Price]*[Deliveries.Amount]".\\
With this action the Sum is automatically calculated, this can only be done with the "Deliveries" and "Sales" data.\\
Finally click on the "Finish" button.

{{:visionx:renewing_oil_application:renewingoil-calculate-value.png?nolink|Calculate value}}

===== Replacing the button with the notebook with a button and form screen =====

You might have noticed the small notebook icon next to the "Supplier" field and the "Producer" field". We want to replace it with a button, which opens a screen with a form.

{{:visionx:renewing_oil_application:renewingoil-notebook-icon.png?nolink|Small notebook icon}}

To hide the button with the notebook icon, open the customizer of the Supplier input field and you will see the option "Show Edit button", we have to uncheck the box.

{{:visionx:renewing_oil_application:renewingoil-hide-notebook-button.png?nolink|Hide button with notebook}}

After hiding the button with the notebook, we want to add a button from the elements and place it between the Supplier field and the Producer label and change the text to a plus sign.

{{:visionx:renewing_oil_application:renewingoil-new-plus-button.png?nolink|Add new plus button}}

Now we want to add an action, that happens, when the button is clicked. Open the customizer of the button and click on "Create Action".

{{:visionx:renewing_oil_application:renewingoil-plus-button-customizer.png?nolink|Add action to button}}

You will see the same screen as before. The action we need in this case, is called "Open Screen" and the screen, which we want to open, is the "Add supplier" screen, then click on "Finish".

{{:visionx:renewing_oil_application:renewingoil-plus-button-action.png?nolink|Defined action to show "Add supplier" screen}}

**We are going to reapet this steps on the "Deliveries" screen for the "Producers", on the "Sales" screen and on the "Production" screen.**

===== Defining the report file and adding the "Show report" function to a button =====

Now open the "Report" screen to add the report function. Click on the "Report" button.

{{:visionx:renewing_oil_application:renewingoil-report-report-button.png?nolink|Report screen, define report}}

You should see a wizard screen called "Manager Reports". We want to integrate the report on the current screen "Producer report", so we don't change anything, we just click on "Next".

{{:visionx:renewing_oil_application:renewingoil-manage-reports-wizard.png?nolink|Report screen, manage reports wizard screen}}

We haven't create any report yet, so we have to create a new one. Click on "Next".

{{:visionx:renewing_oil_application:renewingoil-report-create-new.png?nolink|Report screen, create new report}}

On the next page, we choose spreadsheet as our format and as the layout the detailed form, then click on "Next".

{{:visionx:renewing_oil_application:renewingoil-report-form-layout.png?nolink|Report screen, form and layout of the report}}

Now we can choose, which table is our master table. We choose the "Producer" table and then click on "Next".

{{:visionx:renewing_oil_application:renewingoil-report-master-table.png?nolink|Report screen, master table of the report}}

After we chose the master table, we can add details tables. We add all three of them, "Produced" "Sales" and "Deliveries" and then click on "Next".

{{:visionx:renewing_oil_application:renewingoil-report-detail-tables.png?nolink|Report screen, details tables of the report}}

Next step is to choose, which columns are included in the report. We don't change anything and leave the default settings, then click on "Next".

{{:visionx:renewing_oil_application:renewingoil-report-select-columns.png?nolink|Report screen, columns included in the report}}

We want every detail table to have its own seperate sheet, so we enable the option "Start a new sheet for every detail table" and then click on "Finish".

{{:visionx:renewing_oil_application:renewingoil-report-sheet-for-detail.png?nolink|Report screen, seperate sheet for detail}}

After defining our report, we have the option to automatically add the action "Show report" to an already existing button. In this case we choose the button "Get producer report" and then click on "Finish".

{{:visionx:renewing_oil_application:renewingoil-report-add-automatically.png?nolink|Report screen, add action to button}}

====== Styling the application ======

===== Hide the menu elements =====

We don't want to user to see the "Add supplier", "Add customer" and "Add producer" screens, so we have to hide them.

We can hide the menus in the "Menu" settings, click on the "Menu" button.

{{:visionx:renewing_oil_application:renewingoil-menu-settings.png?nolink|Menu button for the settings}}

You should see the screen called "Menu Management".

{{:visionx:renewing_oil_application:renewingoil-menu-management.png?nolink|Menu Management screen}}

To add a new menu, click on the green plus button and you should see a new menu with an arrow.

{{:visionx:renewing_oil_application:renewingoil-menu-management-new.png?nolink|Menu Management new menu}}

Now we have to move the new menu item to the top with the up arrow on the left side of the menu element.

{{:visionx:renewing_oil_application:renewingoil-menu-management-menu-top.png?nolink|Menu Management new menu at the top}}

After the new menu is at the top the arrow on the left side of the menu element is gone. Now we have to move the "Add supplier", "Add producer" and "Add customer" under the new element. The result should look like this.

{{:visionx:renewing_oil_application:renewingoil-menu-management-hidden.png?nolink|Menu Management hidden menus}}

Now we just have to click on "Finish" and those 3 screens are hidden, we are not allowed to set the title, because the menu gets hidden, when there is no title.

===== Style the application using stylesheets =====

There are already [[:visionx:valo_style_templates|pre-defined stylesheets, which can be used]].

On the webpage follow the instructions, how to use the style templates.

{{:visionx:renewing_oil_application:renewingoil-style-instructions.png?nolink|Instructions for style template}}

After "installing" the style templates, click on the arrow next to the "settings".

{{:visionx:renewing_oil_application:renewingoil-style-settings.png?nolink|Settings to change the style template}}

You should see 5 options, "Desktop", "Web", "Web (next generation)", "Mobile" and "REST", click on "Web".

{{:visionx:renewing_oil_application:renewingoil-style-web-settings.png?nolink|Settings to change the style template}}

After clicking on "Web", you should see the following screen.

{{:visionx:renewing_oil_application:renewingoil-web-settings-window.png?nolink|Web settings screen}}

On the "Design" page, change the Display mode from "Standard" to "Corporation".

{{:visionx:renewing_oil_application:renewingoil-display-mode.png?nolink|Web settings, Display mode}}

After that, click on the "Styles" tab and you can see an editor, where you can put your own css code, but after "installing" the stylesheets, you should see some text.

{{:visionx:renewing_oil_application:renewingoil-style-css.png?nolink|Style css}}

We only change the primary color, remove the "///" at the beginning of line 9 and the "///" at the end of line 9. Then we replace the text "#f78500" with the following text "#6fb15a".

{{:visionx:renewing_oil_application:renewingoil-style-color.png?nolink|New styled settings}}

Finally click on "Finish", the changes, wich we made, can be seen only in web mode. We should change the background to something more fitting. To do that, click on the "Settings" button.

{{:visionx:renewing_oil_application:renewingoil-style-settings.png?nolink|Settings button to access the application settings}}

After clicking the button, you should see the following pop-up screen.

{{:visionx:renewing_oil_application:renewingoil-app-settings.png?nolink|General application settings}}

Now click on the "Design" tab, here you can change the background image.

{{:visionx:renewing_oil_application:renewingoil-background-settings.png?nolink|Settings to change the background}}

Under "Background", click on the "Search" button, then you can choose from the "Application images", "Image library", "Font Awesome" or you can add an image.

{{:visionx:renewing_oil_application:renewingoil-search-image.png?nolink|Locations to choose background from}}

We want to add our own background image, so we click on "Add Image...".

{{:visionx:renewing_oil_application:renewingoil-add-image.png?nolink|Add image button}}

Next we see the basic file explorer, where we can choose the image, which we want to use as our background.

{{:visionx:renewing_oil_application:renewingoil-file-explorer.png?nolink|Image file explorer}}

I have the background image saved on my destkop, so I click on "Desktop" and choose the file called "Background-image-app.jpg" and then click "Open".

{{:visionx:renewing_oil_application:renewingoil-choose-image.png?nolink|Choose image from file explorer}}

After the "Open" button was clicked, you are back at the "Choose Image" screen, here you just have to click "Finish" and then again click "Finish" at the "Application Settings" screen.

{{:visionx:renewing_oil_application:renewingoil-change-image-finish.png?nolink|Finish changing the background image}}

Now you can see our new background image.

{{:visionx:renewing_oil_application:renewingoil-new-background-image.png?nolink|New background image}}

And with the new background image, the styling of our application is finished. You can add and change many other things, but for this application, the changes we made are sufficient.