In this section of the training materials, we will be guiding you through the process of installing a demo application. This application will be used throughout the rest of the training materials, so it's important that you are able to successfully install it. The demo app is a great starting point for getting to know the different features and functionalities that will be covered in the upcoming exercises. It also contains numerous examples that can be used to help you experiment and try new things on your own.

• Download the latest Apliqo UX installer file

• Right-click Apliqo UX installer file and select Run as Administrator

• Follow the installation wizard:

  • Click Next button

  • Click I Agree button

Open

Open

• Select:

  • Demo Applications

  • Install Apliqo Server

• Click Next button

Open

• Finish installation by clicking Finish button

Open

1. Log-in

• Navigate to: http://localhost:8880/Apliqo_Demo/#!/

• User: Demo1 / blank password

Open

2. Enable Edit mode

Edit Mode button gives you the ability to create new applications and make changes or edits to existing ones. It allows you to customize and personalize applications to meet specific needs. Once edit mode is enabled, you will have access to a wide range of editing tools that can help you to modify your applications. Whether you are creating a brand new application from scratch or making changes to an existing one, edit mode is an essential tool.

1. Enable edit mode by clicking Edit Mode button

Open

3. Create first App

Apliqo application is structured in a folder manner, allowing you to organize everything in a logical and intuitive way. By creating folders and subfolders in the navigation bar, you can easily manage your applications and keep them organized.

Creating a new application is a straightforward process. In the Navigation bar click + Add app button that will open Create app popup.

1. Follow the steps

• Enter the App title: App Templates

• Change Create With Default Settings option to No

• Click Create button

After clicking Create button new folder App Templates will appear in the Navigation bar.

Open

A dashboard is a collection of widgets of different types that provide users with a quick and easy way to view and analyze data. These widgets can include charts, graphs, tables, and other types of visualizations that allow users to easily interpret complex data.

By organizing data into a dashboard, you can quickly identify trends, patterns, and insights that might otherwise go unnoticed.

1. Create new dashboard

1. Add a new folder under App Templates

• Open App Templates folder and click + Add...

• In the popup do the following configuration:

  • Public option will be chosen by default, don't change it

  • Type option should say Folder

  • Enter the Folder title: Dashboards

  • Click Create button

New Dashboards folder was created under App Templates.

Open

1. With folder ready you can create first dashboard

• Open App Templates folder

• Choose Dashboards folder

• Click + Add public

• In the popup do the following configuration:

  • Change the Type by choosing Dashboard from the drop-down list

  • Leave the Dashboard Title empty

  • Change Cube Source by choosing General Ledger from the drop-down list

  • Click Create button

After clicking Create button the app will navigate to the newly created dashboard.

Open

2. Publish the App

Newly created pages that have not yet been published will not be visible to others and will be marked with a pencil icon.

1. Save your changes and make the dashboard available for other users

• Click Publish button that will trigger confirmation popup

• Click Yes

Changes will be confirmed by notification visible in the right corner of the page. Publish & Delete button will no longer be displayed.

Open

3. Configure the dashboard

» Change dashboard title and add info tool-tip

Title Change

While in Edit Mode click on page title and when the text field becomes editable, you can easily change the title.

1. Follow the steps

• Click on the page title and change it to: Exec Dashboard

• Click outside of the editable text box and make sure that the title changed

Open

Adding info tool-tip

You can add page specific info tool-tips.

1. Follow the steps

• Click on the Info icon visible next to the page title.

• In the Edit Info popup add This is my first Dashboard info and click Save button

• Hover over Info icon and check if info tool-tip displays and shows the correct text

Open

» New Cube Settings dialog Overview section

» Configure widget data

For the widget to display data, it needs to be configured using the cube settings popup.

1. Follow the steps

• While in Edit Mode click on cube icon visible in widget header and wait for the popup to appear

• Select Default from the View list visible in the left side of the popup under the General Ledger cube

The table preview will be now visible. Global filters as well as column and row dimensions are automatically configured to match the settings from the Default view.

Open

After learning about the fundamentals of view definition, the next step is to further configure it to suit your specific requirements.

1. Drag & drop

• Region dimension to the Widget Rows

• Version dimension to the Widget Columns

• Account dimension to the Global Filters

Click refresh button to see updated table preview.

Open

1. To further practice the configuration process, assign fixed values to certain dimensions

• Select Currency global filter dimension

• Open advanced options GUI by clicking on the wrench icon

• Select Dimension Settings

• Set the Fix option to Yes

• Click Select to choose Selected Fixed Value from the dropdown list

• Choose Local

Open

• Close the cube settings popup

All the changes made in the cube settings modal will be visible in the dashboard.

Open

» Update Global filter attribute

As shown on the screenshot below, Account global filter as well as Region row dimensions are displaying element technical names. This is because for those dimension no attribute was selected.

Open

1. Update the attributes

• Open New Widget cube settings

• Click on the Account dimension

• Open advanced options GUI by clicking on the wrench icon

• Select Dimension Settings

• Change the Attribute value to Code and Description

• Click on the Region dimension

• Change the Attribute value to Code and Description

• Close the cube settings pop-up

Account filter and Region row dimension are now showing the full description.

Open

» Change widget title and add info tool-tip

Title Change

1. Changing the widget title works the same way as it does for dashboards

• Click on the widget title in the editable text box input e.g. Overview

• Click outside of the text box and make sure that the title changed.

Open

Adding info tool-tip

1. Adding information to the widget works the same way

• Click on the Info icon visible next to widget title.

• In the text box add: This is Region Overview widget info

• Click Save button

Open

4. Create new widget

» Add new widget

Adding a new widget to a dashboard can be a great way to enhance its functionality and provide users with more insights and data.

1. You can do that from the dashboard level

• Click the “+” button visible in the dashboard toolbar and choose Widget from the list

• Enter the widget title: Column

• Change the cube source to Retail

• Click Create button

Open

» Setting up the Column chart

Same as in the previous case, in order for the widget to display data, you need to configure it using Cube Settings.

1. Follow the steps

• Click on the cube icon visible in the Column widget header

• Select Default from the Views list under the Retail cube

• Make sure that the preview table is visible

After finishing the configuration close Cube Setting popup and make sure that Column widget displays data.

Open

» Change the widget type

For now, the widget doesn't look like a chart yet. Each widgets header shows its type, in this case it's Grid.

1. Change the widget type

• Click the widget type info visible in the widget header, it now displays Grid

• After the widget type selection menu opens, choose Charts section

• Click Column

Widget refreshed and is now displaying column chart, type visible in the header should say Column.

Open

5. Change the size and layout of widgets

When creating a dashboard, it's important to pay attention to the layout settings. A well designed layout can greatly improve the user experience and make it easier to access important information.

One way to achieve this is by using flexible layout option, which will allow you to place widgets in a variety of sizes and positions. Alternatively, you can use device settings to create a more structured grid layout.

» Flexible Layout functionality

With Flexible Layout functionality, users can easily adjust the size of widgets using drag handles and drag and drop them to different positions within the dashboard. This feature enables users to customize the layout of their dashboard to fit their needs and preferences, providing a more user-friendly experience.

1. Follow the steps

• Click Layout Settings button visible in the toolbar

• Check the box for Flexible Layout

• Click Edit Layout button

• Set the position of the widgets using drag and drop functionality

• Adjust the size of the widgets using drag handle

• When you're finished with configuration, click Lock Layout button

Open

» Device Settings

Flexi grid is not the only way to adjust our dashboard layout. Apliqo UX has the capability to work on all display sizes. In the device settings popup you can set how the page is uniquely displayed on the desktop, tablet and mobile.

Follow the steps below:

• Click Layout Settings button visible in the toolbar

• Uncheck Flexible Layout box

• Select Device Settings button

Open

To be able to create responsive layout, the browser window is divided into 12 columns to get more control over the items or graphics that are used on a page. Each columns width is defined by percentage (%) instead of a constant value. This way, it doesn’t matter the size or display resolution of the device, if you need to use several widgets on a row, you need to pick how many columns you need for each with the idea of having 12 columns in total in a row.

Number of column used is controlled by the column bar.

1. To practice this method, follow the steps

• Set the column bar to 6 for Overview and Column widget

• Close the popup

Notice that the widgets have taken up 50% of the page's width.

1. Try different configuration

• Set the column bar to 3 for Overview and Column widget

• Close the popup

As you can see the dashboard has updated once again. The same method is used to set layout for other devices.

Let's return to the original layout by checking the Flexible layout checkbox under Layout Settings.

Open

6. Widget interactivity

» Turn on Hyperlinks

By enabling the hyperlink option for row elements in widgets, users can interact with the data in a more dynamic way. Clicking on a row element will update the dashboard filters.

1. To enable this option follow the steps

• Open Cube setting for the the Overview widget

• Click on the Region dimension

• Open advanced options GUI by clicking on the wrench icon

• Select Dimension Settings

• Set the HyperLink to change filters value to Yes

• Close the pop-up

Region row headers are now formatted as hyperlinks and clicking them will update Region global filter.

Open

» Active Row

In this exercise, you will learn how to turn off the active row highlight. The active row is the one that corresponds with the current global filter value and is highlighted in the grid.

To begin with, take a look at the Overview widget and notice that Europe row has different formatting applied.

1. Follow the steps

• Change the region global filter to America and observe that the highlighted row changes

• Click on the widget header. You will see a blue triangle indicating the current selection

• Open the advanced options panel by clicking on the wrench icon

• Expand the Table Config section by clicking on the + icon

• Select Active row and set the Enabled option to No

You should now see that the highlight is no longer appearing in the grid.

Open

7. Duplicate and delete a widget

» Duplicate a widget

Creating new widgets from scratch can be time-consuming, but fortunately, there is a quicker way to add similar widgets to a dashboard. By duplicating an existing widget, you can save time and effort in the widget creation process. This allows you to make small tweaks to the duplicated widget to create a new, custom version that meets your needs.

1. Follow the steps

• Open Action Menu for Column widget by clicking on the 3 dots icon visible in the widget header

• Choose Duplicate

• Input Title: Duplicate Column

• Click Duplicate

New widget will appeared in the dashboard.

Open

» Delete a widget

• Open Action Menu for Duplicate Column widget by clicking on the 3 dots icon visible in the widget header

• Choose Delete

• Click Yes in the confirmation popup

Duplicate Column widget is no longer visible in the dashboard.

Open

8. Additional functionalities

» Basic Widget Settings

This exercises will focus on exploring basic widget settings, with a specific focus on card configuration. By adjusting these settings, users can customize the appearance and behavior of widgets in their dashboard. This can improve the usability and functionality of the dashboard.

Height

Configuring the card height of a widget is an important aspect of dashboard design. There are three possible ways to set the card height:

• fixed value (e.g. 500),

• auto

• percentage-based (e.g. 50% or 100%)

The auto option will automatically adjust the card height based on its content, while the percentage-based option will allocate a given percentage of the page height to the widget. these settings will not apply if the user is using the Flexible Layout grid option.

In this exercise, we will explore how to configure the card height of a widget using all available options.

Navigate to UX Samples - Card Config - Height: auto, 50%, 100%

Fixed value

1. Follow the steps

• Open the advanced options panel by clicking wrench icon

• Select Widget 1 widget (selection will be indicated by the blue triangle visible in the header)

• Select Card Config

• In the Height textbox input: 700 (clear the auto value)

Notice that the widget height changed accordingly to the inputted value.

Auto

1. Follow the steps

• Open the advanced options panel by clicking wrench icon

• Select Widget 1 widget (selection will be indicated by the blue triangle visible in the header)

• Select Card Config

• In the Height textbox input: auto

Card height changed and now it will automatically adjust to the table content.

1. To test it further, follow the steps below

• collapse America element by clicking on the minus icon (-)

• card height will again adjust to match the table content

Open

Percentage-based

Now you will use % value to define the widget card height.

1. Follow the steps

• Open the advanced options panel by clicking wrench icon

• Select Widget 1 widget (selection will be indicated by the blue triangle visible in the header)

• Select Card Config

• In the Height textbox input: 100%

You will notice that the chart widget is still taking up 100% of space available in the dashboard.

1. Test it further

• open the browser settings menu

• use zoom option and change it to 150%

• widget is still taking up 100% of space available in the dashboard

• open the browser settings menu » use zoom option and change it to 80% Chart widgets is still taking up 100% of space available in the dashboard.

Open

By setting the widget card height using %, users can define the amount of space that the widget should take up on their dashboard, allowing for a customized design. This means that users can input any value they need to achieve the desired widget height.

Title Separator

In this exercise, we will disable the title separator, which is the line that appears between the header and content of a widget in a dashboard. While it can provide a clear visual distinction between these two areas, some users may prefer to disable it for aesthetic or functional reasons.

1. Follow the steps

• Open the advanced options panel by clicking wrench icon

• Select Widget 1 widget (selection will be indicated by the blue triangle visible in the header)

• Select Card Config

• Set Title Separator to No

You will notice that the line between widget and it's content is no longer visible.

Open

Top Border

In this section you will learn how to customize the appearance of a widget header by changing the Top border setting. By adjusting this setting, you can control whether the widget header is visible outside of the edit mode, giving you greater control over the overall look and feel of your dashboard.