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

• Finish installation by clicking Finish button

1. Log-in

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

• User: Demo1 / blank password

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

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.

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.

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.

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.

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

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

» 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.

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.

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

• Close the cube settings popup

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

» 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.

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.

» 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.

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

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

» 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.

» 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.

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

» 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

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.

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.

» 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.

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.

» 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.

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

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.

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.

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.

1. Follow the steps below and see the impact it has on your widget design

• 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 Top Border to No

• Save the changes

• Disable the edit mode

You will notice that the widget header is no longer visible. Turn the edit mode back on.

No Card

Each widget has a card layout and it has default styling such as white background, a primary color top border, a slight drop shadow effect around the box and margins around it to create some space. Default No Card value is No which means there is a rectangle card layout covering the widget.

1. Remove the card property from the widget

• 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 No Card to Yes

You will notice that the widget card is no longer visible. Discard the changes.

» Setting up widget filters

Navigate to App Templates - Dashboards -Exec Dashboard

Changing dashboard filters applies to all widgets on a page. However, there is an option to set a filter that will apply only to the selected widget.

1. This is how you can do it

• Open Cube Settings for Overview widget

• Drag and drop Year dimension to Widget Filters section

• Close the popup

Now Overview widget has a filter available in its header, it's displaying 2016.

• Change the filter to 2012 and than back to 2016

• Make sure that only Overview widget refreshed

» Column filters

If you want to filter the table by specific values or elements, you can do it using column filters.

1. Follow the steps

• Click Toggle column filters button

• Open the advanced filters for Region column and select America and Europe

• Click Clear All Filters

• Open the advanced filters for Actual column

• Click Filter Top X

• Choose Top or Bottom

• Number: number of elements

• Items or Percent: refers to the number above

• The source elements: current elements, leaf elements in a subset or in a dimension

• Remove filters by clicking Clear All Filters or one individual filter

» Cell Commentary

In this exercise, we will explore a useful feature in the application that allows us to add comments to individual cells in a table. This feature can be helpful when working with large datasets and collaborating with others on data analysis tasks.

1. Follow the steps

• Right click on any cell in Actual column in Overview widget

• Choose Comments from the table context menu

• In the Cell Commentary pop-up enter the text: this is my test commentary

• Click Post button

Commented cells with will be marked with a red triangle

You can access the full commentary history of a cell in a table by right-clicking on the cell and selecting Comments. Additionally, users can delete their own comments using the Delete button in the cell commentary popup window.

1. Try it out

• Right click on a cell in Actual column marked with red triangle in Overview widget

• Choose Comments from the table context menu

• Message posted in the previous exercise will be visible

• Click X button visible in the Delete column

• In the confirmation popup click Delete button

Comment will no longer be visible in the Cell Commentary popup.

1. Test it further

• Add another comment, this time with formatting applied (e.g bold font), to any cell in the Overview widget

» Adjust column width in grid widget

Not only can you edit the layout and settings of a dashboard, but you can also make changes directly inside a widget.

1. For example, you can adjust the width of columns in a grid widget using the following steps:

• Change the column width in the Overview widget by dragging the borders of the columns

• Click Save to Options button, which is available under the three dots icon visible in the widget header

» Show Source data

This exercise will show you how to access the source data for a widget, which is presented in a table format providing greater insights and understanding of the data being displayed.

1. Follow these steps to view the data source for a Column widget

• Click on the three dots icon in the widget header to open the Action Menu

• Select Show Source Data from the dropdown menu

• The grid with the data source will be displayed, allowing you to view the data in a tabular format

• Switch back to the chart by clicking on the three dots icon and selecting Revert back to original widget

» Export chart to PNG

In some cases, you may need to share a chart from the application with a user who doesn't have access to it.

1. You can export the chart to a PNG file with just a few simple steps

• Click on the three dots icon in the Column widget header to open the Action Menu

• Select Export from the dropdown menu

• Choose PNG

The PNG file will be downloaded to your computer, allowing you to share it with anyone who needs it.

9. Save the dashboard

While editing a dashboard, all the configurations made are only visible in edit mode and are not available once it's turned off. This means that end-users won't be able to see any of the changes made.

However, there's an easy way to make the configurations available to end-users.

1. Follow the steps

• Click Save & Discard button

• A confirmation popup will appear showing you the changes made

• Click Save changes button to confirm

The changes will now be available outside of the edit mode, allowing end-users to see the updates made to the dashboard.

10. Connect widgets

In UX 2021.11 release, a new feature has been introduced that allows users to connect widgets together. This means that you can now combine widgets from the same or different cubes, as long as the row dimension elements are the same.

In this exercise, we'll explore how to use this new feature by connecting two widgets and displaying them together as one widget. By the end of the exercise, you'll have a better understanding of how to use this powerful new feature in your own dashboards.

» Navigate to the prebuild dashboard

For this exercise, you will use an existing pre-built dashboard in the Apliqo Demo app.

1. Follow these steps to access the dashboard

• Open the UX Samples Folder.

• Select Connected Widgets.

• Click on Using the same or different cube.

App will navigate to the selected dashboard.

» Change master widget

In this dashboard only two widgets are currently displayed. However, if you examine the elements chosen for these widgets' columns, you'll see that different dimensions were merged.

In this exercise, we'll take a closer look at the cube settings to understand how this was accomplished and use the master widget option to give you greater control over the data displayed in the tables.

1. Follow the steps

• Open the cube settings for Different cubes 1 widget

• You will see four widget tabs: Different cubes 1, Different cubes 2, Same cube 1 and Same cube 2

• Click on the Refresh button

• A table preview will appear, showing the first part of the connected widgets

• Select Different cubes 2 tab

• Click on the Refresh button again

Another table preview will appear, showing the second part of the connected widgets

1. In the next part of the exercise, you'll have the opportunity to change the master widget and observe how its settings affect the final results displayed in the dashboard

• Change the Version dimension subset by selecting Default Member from the dropdown list

• Open the advanced option by clicking the wrench icon

• Select Widget Settings

• Clear the selection for the current Master Widget

• Navigate to the first tab (Different cubes 1)

• Open the widget settings for Different Cubes 1

• Select Different cubes 2 in the Master Widget dropdown list

• Close cube settings popup

Once the widgets are connected, the settings from the master widget are applied to other tables. This means that the column dimension from the master widget is displayed as the first column in the new connected grid, and the subset selected for the row dimension is also applied.

• Save the changes

If you only need to display a single table of data on a page, you can use the 'View' page type instead of a dashboard. This can be a more streamlined way to present data without the added complexity of multiple widgets and visualizations. In this exercise, you'll learn how to create a view page and customize it to display the data you need.

1. Create a view

• 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: Views

  • Click Create button

New Views folder was created under App Templates.

With folder ready you can create first view.

1. Follow the steps

• Open App Templates folder

• Choose Views folder

• Click + Add public

• In the popup do the following configuration:

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

  • Enter the view title: Sales Planning

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

  • Click Create button

After clicking Create button, application will automatically navigate to the new view.

2. Publish the view

Keep in mind that any configurations or changes you've made so far are only visible to you and not to other users. If you want to make your view accessible to others, you'll need to publish it. Unpublished pages are indicated by a pen icon.

1. To publish your view follow the steps

• click the Publish button

• confirm by clicking Yes in the confirmation popup

Once your view is published, other users with the appropriate permissions will be able to view and interact with it.

3. Configure the view

1. Follow the steps

• Click on the cube settings icon visible in the page toolbar

• Select Input from the Views list under the Retail cube

Preview table will be dispalyed.

1. Configure row and column dimensions by following the steps

• Select Period dimension

• Open advanced options GUI by clicking on the wrench icon

• Select Dimension Settings

• Change the List Type to Subset

• Choose Default from the Subset drop-down list

• Set the attribute to Short Description

• Select Product dimension

• Change the List Type to Subset

• Choose Accessories from the Subset drop-down list

• Set the attribute to Code and Description

Click Refresh button to check if all the changes were applied correctly.

After closing the Cube Settings popup the view will display selected data.

4. Save the view

1. To make this configuration available for end-users, follow the steps:

• Click Save & Discard button

• In the confirmation popup, click the Save changes button

Popup will close and the changes are now available outside of edit mode.

5. Add new Sub-view

In this section, we'll explore how to add a new sub-view to our existing table. New sub-view can be part of the same cube or a slice of a different one. By creating reports with multiple sub-views, you can join tables with different row dimensions, as long as the selected elements share the same principal name or alias. This process is similar to creating connected widgets. Additionally, you can configure the view to include the same dimensions in the report's global filters as well as rows.

1. To add a sub-view to the table, follow the steps:

• Click on the plus icon visible in the page toolbar

• Select Table from the list of options

• In the popup do the following configuration:

  • Enter the title: Version

  • Change Cube Source by choosing Retail from the dropdown list

  • Click Create button

1. To configure the newly added sub-view, follow these steps

• Click cube icon visible in the page toolbar to open up the settings popup

• Select Version sub-view tab

• Move Version dimension to the Column section

• Select Act Bud Comparison from the Subset dropdown list

• Move Product dimension to the Row section

• Close the cube settings popup

Now new sub-view is visible the table.

• Save the changes

6. Formatting & Conditional formatting

In addition to displaying data, the application provides you with tools to enhance the visual presentation of the reports. Applying formatting can help highlight important information and make it easier to interpret. This functionality is also available for grid widgets.

1. There are different methods of applying formatting, but in this exercise, you will use the advanced options GUI