Web application

Create customized dashboards and reports using Sweet Automation, Sweet Portal, Excel and/or Azure Dev Ops data.

start1

Getting started with your application

emptyApp1

1. Application settings

Settings - manage the application’s users. (! The user with permission ‘viewer’ cannot see this button)

Help - access PDF user documentation that can help you to use the application properly.

User profile - profile settings, access Home and Log Out functionality

2. Component panel - the list of elements available for your application. Navigate to a component and drag and drop it somewhere into the empty white space.

3. Element panel open/close

app2 - open the element panel by clicking on this icon

app4 - this icon is greyed out when the element panel is open

Elements

Drag and drop elements

components1

1. Save/Discard changes - save the changes made in your application or discard the changes made in your app since your last saved changes

2. Drag and drop elements - each component can be edited, removed and resized. A placeholder for each component will be displayed before editing.

3. Settings - hover over the component to see the settings icon. More options from the component setting will be visible when the button is clicked.

Elements for visualizing and analyzing your data

Nine different elements can be used to visualize and analyze your data.

all1

Data source visualization

To create a visualization, first select your data set, then adjust the settings and style. Data from Sweet Portal, Sweet Automation, Excel or/and Azure Dev Ops can be used.

dataset

1. Search - the user can find the needed data source in an easy way

2. List of all connected data sources - the user can select/unselect data fields that should be included in your visualization

3. Preview of the selected data - the user can see the preview of the data which has been chosen from the data source for your visualization

Chart

chart1New

editV

  1. Settings and Filters
  2. Create data visualization
  3. Customize settings
  4. Change the visual type
  5. Sort data in ascending or descending order
  6. Data table
  7. Main view of your graph

Settings

editS

  1. Data set name

The selected data set for this visualization is displayed on the left-hand side of the screen. You can change the currently selected data set by clicking on the name.

  1. Create data visualization

Each graph type has its own unique settings. To create a graph, choose values from the drop-down list. Use Category to break down a measure. When adding a categorical field into the Category area, each column will be split into multiple columns corresponding to the categories. Each column still represents the same measure.

Style options - choose from several options for customizing your visuals. Different visual types have other style options.

editSO

This is where you control the visual styling of your graphs. You will see different settings depending on the graph type. For example, for most of the charts, you will be able to turn on and off the grid lines, the legend and the data labels. For the bar chart, you will be able to turn on and off the stacked bars.

Naming - to make your chart easier to understand, you can set a chart name, x-axis and y-axis name and choose your own font size.

Colours - the users can simply change the background and the text colour used in the chart.

Change the visualization type

Change the visualization type from the listed icons located on the top right-hand corner of the screen. You can change the type of visualization without losing any changes quickly and easily. You can change between different visual types for your data only if they belong to the same group. For example, a bar chart can be changed to the line, area, column, combo, donut or pie but cannot be changed to a gauge.

app8

app9

How to create a drill-down?

Drilling down gives users a way to explore additional data within one chart. Instead of creating multiple charts in your dashboards, you can create one single chart with drill-down enabled.

The drill-down is available for all visual types.

This functionality is located at the same place where you create or edit your chart. The best way to add the drill-down capability to a chart is to choose data set and create your first chart.

Click on the green button “Add drill-down” to choose data fields and define the hierarchy levels of your chart.

drill1

drill2

How to drill down?

After creating at least two levels of your chart, you and your users will be able to click on one data point and drill down further to the next level. All users that are part of your application, regardless of their permissions, can use this functionality.

Line/Area chart: Click on one of the dots to access the next level.

Column/Bar chart: Click on one of the columns/bars to access the next level.

Combo chart: Click a dot or a column/bar to access the next level.

Pie/Donut chart: Click on one of the slices to access the next level.

Table: Click on one of the rows to access the next level.

To return to the previous level, click on the back button.

drill3

Sort data

Manage in which order you want to present your data. The setting for sorting is located on the upper right-hand side of the screen. By default, the graph is not sorted. You can sort the data in ascending or descending order.

app10

Data table

The selected data used in visualization is displayed below the visual.

See also

This table is not visible for table and gauge element.

app11

Filters

Data filtering is used in order to present the selected information based on specific criteria.

Click ‘Create new condition’ and choose the data column you would like to filter.

filter

For some data types, you will be able to select values from an autocomplete drop-down list and for some, you will be able to write your values.

image73

filter3

Charts and dashboard filters

Add multiple charts and/or dashboard filters for you and your end-users. Users with permission ‘publisher’ can add chart and/or dashboard filters. Users with permissions ‘viewer’ can only filter on the already created chart or dashboard filters (since they do not have permission to edit the chart). You can add only chart filters, only dashboard filters or both. When you select or type in a value, it will immediately apply to the chart or dashboard. The value changes are visible only for your user. You can also reset the filters to the default values by clicking on the Reset filters button inside the filter pop-up.

app18

Chart filters - how to create filters

  1. Under Filters tab, click “Create new condition” and choose the data column you would like to filter.
  2. To add filters in your chart or dashboard, click the checkbox “Display as chart filter”.
  3. A new input field will appear at the top of the selected data column. Click the input field if you want to rename the current data field.

Once you create filters, you and your end-users can filter the chart or dashboard.

app19

app20

Chart filters - how to use chart filters

Two ways of using chart filters

  1. Hover over one of your charts and click the funnel icon. In order to change the current or default values, type in/remove values from the filters. To see the new changes, click the X button or click somewhere outside of the pop-up

app21

  1. Filters can be placed right above the chart. In this case, you can change the values by simply clicking and changing the values in the filters. To see the new changes, click somewhere outside of the filter

app22

How to show filters in charts

In order to make the filters more accessible for everyone, click on the toggle button “Show in dashboard”. When this button is enabled, then the filters are placed above the chart.

app28

Reset filters

When creating a chart, you can eliminate specific data by using filter functionality and showing only selected data to your users. And those are the default values. You can also reset the filters to the default values by simply clicking on the Reset filters placed inside the pop-up.

app24

Dashboard filters - How to use dashboard filters

Dashboard filters work the same way as chart filters. There are two ways to use the dashboard filters.

  1. Hoover the top right-hand side corner to see the icons. Click the funnel icon. In order to change the current or default values, type in/remove values from the filters. To see the new changes, click the X button or somewhere outside of the pop-up.

app25

  1. Filters can be placed at the top of the dashboard. In this case, you can change the values by simply clicking and changing the values in the filters.

app26

How to show filters in dashboards

In order to make the filters more accessible for everyone, click the toggle button “Show in dashboard”. When this button is enabled, then the filters are placed at the top of the dashboard.

app33

Reset filters

When creating a chart, you can eliminate certain data by using filter functionality and showing only selected data to your users. And those are the default values. You can also reset the filters to the default values by simply clicking on the Reset filters placed inside the pop-up.

app27

Example:

Someone from your organization with permission “publisher” set default filters in this table. That means we can only see data for Deal, Offer and Management (image 1).

We can remove Offer and Management and type in CRM. Now we are seeing data only for Deal and CRM (image 2).

Next, we would like to remove our changes and see the data as it was before our changes. Hover over the table and click the funnel icon. Now click the Reset filters button (image 3).

The last image shows that our values in filter called Type got back to default values.

app29

app30

app31

app32

Line chart

A line chart presents the changing trend of data through the broken lines and shows the continuous data that changes over time. The user can display multiple lines in one graph. You can set individual colours for each data value. Click the colour boxes and select the colour you wish to use.

line

The line chart has one horizontal (x-axis) and one vertical (y-axis) axis. The x-axis is the independent axis as its values are not dependent on anything measured. The y-axis is the dependent axis as its values depend on the x-axis’ values.

To get a visual, you need to select at least one data field for the x-axis in Axis and at least one data field for the y-axis in Values.

Select one data field for Category if there are data fields already in x-Axis and Values and you want to categories your data by series. Your graph may become a chart with multi-lines.

In our example, we are showing the summary of sold units for the last year (vertical axis) for every month (horizontal axis) categorized per each type of deal (legend).

Customizing your line chart

area

Settings

General - it is possible to name the chart. Both background and text colours, as well as the font size used in the chart, can be simply changed by the user.

Axis - it is possible to name the axis and turn it on/off.

Begin Y-axis at zero – By default, the data in your chart starts at the lowest value. You can set the range to start at 0 on the vertical axis by turning on this setting.

Legend and Legend position – explanation of data and colour correspondence. You can decide if the legend will be displayed at your chart’s top, bottom right or left.

Data labels - display exact numbers directly in a chart.

Colours - you can set individual colours for each data value. Click the colour boxes and select the colour you wish to use.

Grid lines – grid lines for the x and the y-axis, click the colour box and select the colour you wish to use.

Area chart

Similar to a line chart, the area chart can express changes across time.

area1

The area chart has one horizontal (x-axis) and one vertical (y-axis) axis. The x-axis is the independent axis as its values are not dependent on anything measured. The y-axis is the dependent axis as its values depend on the x-axis’s values.

To get visualization, you need to select at least one data field for the x-axis (Axis) and at least one date data field for the y-axis.

Select one data field for Category if you already have data fields in Axis and Values and you want to categories your data by series. Your graph may become a chart with multi areas.

In our example, we are showing the summary of sold units for the last year (vertical axis) for every month (horizontal axis) categorized per each type of deal (legend).

Customizing your area chart

area

Settings

General - it is possible to name the chart. Both background and text colours, as well as font size used in the chart, can be simply changed by the user.

Axis - it is possible to name the axis and turn it on/off.

Begin Y-axis at zero – By default, the data in your chart starts at the lowest value. You can set the range to start at 0 on the vertical axis by turning on this setting.

Legend and Legend position – explanation of data and colour correspondence. You can decide if the legend will be displayed at your chart’s top, bottom right or left.

Data labels - display exact numbers directly in a chart.

Colours - you can set individual colours for each data value. Click the colour boxes and select the colour you wish to use.

Grid lines – grid lines for the x and the y-axis, click the colour box and select the colour you wish to use.

Column Chart

A column chart shows data values represented as vertical bars. You can make more complex comparisons of data by using grouped or stacked bars.

new1

The column chart has one horizontal (x-axis) and one vertical (y-axis) axis. The x-axis is the independent axis as its values are not dependent on anything measured. The y-axis is the dependent axis as its values depend on the x-axis’s values.

To get visualization you need to have at least one data field for the x-axis in Axis and at least one data field for the y-axis in Values.

Select one data field in Legend if there are data fields already in x-Axis and Values and you want to categories your data by series. Your graph may become a chart with multi-columns.

Customizing your column chart

column1

Settings

Chart - Stacked bars - Stacked bars combine bars of different groups on top of each other and the total height of the resulting bar represents the combined result. Add more than one numeric data field to be able to get stacked bars.

General - it is possible to name the chart. Both background and text colours, as well as font size used in the chart, can be simply changed by the user.

Axis - it is possible to name the axis and turn it on/off.

Begin Y-axis at zero – By default, the data in your chart starts at the lowest value. You can set the range to start at 0 on the vertical axis by turning on this setting.

Legend and Legend position – explanation of data and colour correspondence. You can decide if the legend will be displayed at the top, bottom right or left of your chart.

Data labels - display exact numbers directly in a chart.

Colours - you can set individual colours for each data value. Click the colour boxes and select the colour you wish to use.

Grid lines – grid lines for the x and the y-axis, click the colour box and select the colour you wish to use.

Bar Chart

A bar chart shows data values represented as vertical bars. You can make more complex comparisons of data by using grouped or stacked bars.

new2

The bar chart has one horizontal (x-axis) and one vertical (y-axis) axis. The x-axis is the independent axis as its values are not dependent on anything measured. The y-axis is the dependent axis as its values depend on the x-axis’s values.

You need to select at least one data field for the x-axis (Axis) and at least one date data field for the y-axis (Values) to get a visualization.

Select one data field for Category if there are data fields already in x-Axis and Values and you want to categories your data by series. Your graph may become a chart with multi bars.

Customizing your bar chart

column1

Settings

Chart - Stacked bars - Stacked bars combine bars of different groups on top of each other and the total height of the resulting bar represents the combined result. Add more than one numeric data field to be able to get stacked bars.

General - it is possible to name the chart. Both background and text colours, as well as font size used in the chart, can be simply changed by the user.

Axis - it is possible to name the axis and turn it on/off.

Begin Y-axis at zero – By default, the data in your chart starts at the lowest value. You can set the range to start at 0 on the vertical axis by turning on this setting.

Legend and Legend position – explanation of data and colour correspondence. You can decide if the legend will be displayed at the top, bottom right or left of your chart.

Data labels - display exact numbers directly in a chart.

Colours - you can set individual colours for each data value. Click the colour box and select the colour you wish to use.

Grid lines – grid lines for the x and the y-axis, click the colour boxes and select the colour you wish to use.

Combo chart

The combo chart is a combination of a column and line chart within a single visualization. It is suitable for comparing different data sets that are related to each other.

combo2

Sometimes you may be interested in showing the sold units of a product for this year compared to the previous year. You can do that by creating a combo chart with data in bars and lines.

The combo chart is structured almost the same as the other visual types. It has one horizontal (x-axis) and one vertical (y-axis) axis. The x-axis is the independent axis as its values are not dependent on anything measured. The y-axis is the dependent axis as its values depend on the x-axis’s values.

Select one data field for Category if you already have data fields in x-Axis and Values and you want to categories your data by series. Your graph may become a chart with multi-columns.

In our example, we are showing the summary of quantity for the actual year (stacked columns) per month (horizontal axis) for each type of deal (bar series) compared to the summary of quantity for last year (line).

Customizing your combo chart

combo3

Settings

Chart - Stacked bars - Stacked bars combine bars of different groups on top of each other and the total height of the resulting bar represents the combined result. Add more than one numeric data field to be able to get stacked bars.

General - it is possible to name the chart. Both background and text colours, as well as font size used in the chart, can be simply changed by the user.

Axis - it is possible to name the axis and turn it on/off.

Begin Y-axis at zero – By default, the data in your chart starts at the lowest value. You can set the range to start at 0 on the vertical axis by turning on this setting.

Legend and Legend position – explanation of data and colour correspondence. You can decide if the legend will be displayed at the top, bottom right or left of your chart.

Data labels - display exact numbers directly in a chart.

Colours - you can set individual colours for each data value. Click the colour boxes and select the colour you wish to use.

Grid lines – grid lines for the x and the y-axis, click the colour box and select the colour you wish to use.

Pie chart

Each slice of the pie chart shows the size of that slice relative to the whole pie. The pie chart uses slices. Create a pie chart to visualize the whole data set using the slices to represent the individual values.

pie

A pie chart is a circle divided into different sections that represent the proportions of the whole. It is best used for visualizing data when you have a small number of categories to compare or significant differences between a few sections.

A pie chart requires at least two data fields from your data set, one for the data field in Values and one in Category.

Our example shows the summary of sold units for last year for every type of deal.

Customizing your pie chart

half

Chart - Half circle - is a 180-degree graph representing the composition of a whole pie.

General - it is possible to name the pie. Both background and text colours, as well as font size used in the chart, can be simply changed by the user.

Legend and Legend position – explanation of data and colour correspondence. You can decide if the legend will be displayed at the top, bottom right or left of your chart.

Data labels - display exact numbers directly in a chart.

Colours - you can set individual colours for each data value. Click the colour boxes and select the colour you wish to use.

Donut chart

A donut chart is a circle divided into different sections that represent the proportions of the whole. It is the same as pie charts, just with a hole in the middle.

donut

They are best used to visualise data when you have a small number of categories to compare or a large difference between few sections.

A donut chart requires at least two data fields from your data set, one for the data field in Values and one in Category.

Our example shows the summary of sold units for last year for every type of deal.

Customizing your donut chart

donut2

Chart - Half circle - is a 180-degree graph representing a whole doughnut’s composition.

General - it is possible to name the donut chart. Both background and text colours, as well as font size used in the chart, can be simply changed by the user.

Legend and Legend position – explanation of data and colour correspondence. You can decide if the legend will be displayed at the top, bottom right or left of your chart.

Data labels - display exact numbers directly in a chart.

Colours - you can set individual colours for each data value. Click the colour boxes and select the colour you wish to use.

Table

The table shows detailed data and precise values. Create a table with the help of many aggregation options to summarize your data in a more meaningful way.

table

Select one data field for Rows and at least one data field for Columns to create a table. By default, when selecting data fields for Columns, an aggregation is applied.

Select one data field for Pivot if there are data fields already in Rows and Columns and you want to categories your data by series.

In our example, we show the summary of quantity for the actual year per month for each type of deal.

Customizing your table

table1

General

The user can name the table. Choose background colour and font colour/size.

Rows per page – choose how many rows should be displayed per page.

Gauge

Use a gauge chart to measure and display progress against a target that you set. The gauge uses a needle to show information as a reading on a dial on the coloured date range.

ga

Value and Target - the value inside the arc represents the progress value. Add custom numbers or select data fields to Value and Target areas to create a gauge. The number of arcs and colours can be changed from the ‘Ranges’ tab.

See also

since the gauge can be created in a few different ways, the UI is different on this component than on others.

sum - aggregation option of the entire data column, choose aggregation value from the green dropdown button

Customizing your gauge

gauge1

The user can name the gauge and change: background, text and needle colour.

Ranges - Add multiple ranges to show colour variations of your data by clicking the plus icon. Type label names for each range and choose their text colour. Manage the size of each range from the range slider at the bottom.

Gauge - examples

1. Create a gauge without selecting any data set. Type fixed values into Value and Target input fields. In our example, we measure the total leads received in the previous month versus our target goal. We received 800 new leads during the last month (Value) and our target goal was 2000 (Target).

g.example

2. Select the data set and create a gauge by selecting data fields for Value and Target. In our example, we measure how our sales team performs this year compared to the previous year. We selected SumAY (actual year) for Value and SumLY (last year) for Target.

g.example2

3. Select one data field for Value and type a fixed value into the Target input field and vice versa. In our example, we measure how much our sales team is selling towards our target goal for this year. We selected SumAY for Value from our data set. We have a target goal of 70 000 000, which means it is a fixed value. We typed 70 000 000 into the Target input field.

g.example3

Aggregation options

app12

Data visualization settings

Enlarge

See your visuals in a bigger preview by clicking the enlarge icon. Hover over the element to see the icon.

enlarge

Click on the toggle button “View as table” to see the underlying data used for the current data visualization.

enlarge4

enlarge3

Export

Export your data visual as a PNG or CSV file. You will be able to see the export icon only after you create a data visualization.

export

See also

Table component can be exported only as a CSV file.

Share

Share and copy the embed code for an element or an entire grid.

share

Share element and copy embed code

app13

Hover an element and click the share icon.

Use this functionality to share elements or a grid into your Portal.

Share this element

By default, this setting is turned off. Click the check box to enable sharing an element. Two settings will become available: set an element name and copy embed code.

Name

This field will be pre-populated if you have already specified a chart name from the customize settings. If you haven’t done that, you can name the element you would like to share.

Copy embed code

Copy the given code and paste it into the external blocks in Sweet One.

When making changes in this dialogue, make sure you save the changes in your application. You can do that by clicking the green Save changes button in the top navbar.

app14

Text element

The Text element allows you to add text to your application. Drag and drop the Text element from the element panel into your application.

text

Text editor - create rich, textual content using the set of tools for creating, editing and formatting the text.

Change the background colour - you can change the colour of the background for your text element.

Manage your user profile

prof

Profile2

You can easily update your user account information. The available languages are: Swedish and English - the language will define the data format in your application.

Application settings - manage users or download the application as a template

settings1

Users

1. Add users and give permissions - click on the ‘add users’ button to:

  1. add users - users who are already ‘members’ of your subscription but not yet members of your application
  2. invite new users to the application, new users who do not belong to your subscription

2. Edit current permissions or remove the users from the application - click the 3 dot icon to see the users settings.

addNew

add2

Select the existing user(s) (users who are part of your subscription) or type an email to send an invitation to the new user(s) (users who are not members of your subscription).

Application permissions

1. Publisher – users can edit and remove content. As well as manage other users within this app.

2. Viewer – users can be part of the application but without the ability to change any content.

Edit or remove users from the application

Click the 3 dot icon to see the settings for ‘edit’ and ‘remove’.

Edit - change the current permission of the user from the dropdown menu.

Remove - remove users from the application.

edit

Advanced settings

Download or upload an application template

advanced - Use this button to download the entire application as a template. To import the downloaded application file, create a new application and click the Browse button to import the template from your computer.

adv