Application¶
Create customized dashboards and reports using Sweet Automation, Sweet Portal, Excel and/or Azure Dev Ops data.
Getting started with your application¶
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
- open the element panel by clicking on this icon
- this icon is greyed out when the element panel is open
Elements¶
Drag and drop elements¶
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.
Header¶
The header component is placed in the application by default.
The user can choose to name the application by giving it a title. The user can also change the background and text colours.
Logo URL - enter the URL of your logo. It is possible to set both the height and the width of your logo.
Settings for elements¶
Hover over the elements to see the settings icon.
Edit - the user can edit the component
Duplicate - the user can duplicate the existing component, create a copy of the original visualization within your dashboard.
Copy - the user can copy the existing component. The copied component is saved to the clipboard.
Paste - the user can paste the copied component. Paste the component in the same or different application within the same subscription.
Remove - remove a component from the application.
Component editor window¶
Select a pen icon in order to access the editor window or click on the green link underneath the light grey icon when the element is empty.
Editor action buttons
save - saves all the changes you made in your application without closing the element editor.
save & close - saves all the changes you made in your application and closes the element editor window.
close - closes the element editor
undo the changes done in the component editor.
redo the changes from the component editor.
Elements for visualizing and analyzing your data¶
Nine different elements can be used to visualize and analyze your data.
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.
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¶
- Settings and Filters
- Create data visualization
- Customize settings
- Change the visual type
- Sort data in ascending or descending order
- Data table
- Main view of your graph
Settings
- 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.
- 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.
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.
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.
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.
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.
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.
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.
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.
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.
Chart filters - how to create filters¶
- Under Filters tab, click “Create new condition” and choose the data column you would like to filter.
- To add filters in your chart or dashboard, click the checkbox “Display as chart filter”.
- 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.
Chart filters - how to use chart filters¶
Two ways of using chart filters
- 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
- 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
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.
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.
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.
- 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.
- 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.
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.
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.
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.
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.
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
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.
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
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.
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
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.
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
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.
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
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.
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
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.
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
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.
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
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.
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.
- aggregation option of the entire data column, choose aggregation value from the green dropdown button
Customizing your gauge
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).
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.
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.
Aggregation options¶
Data visualization settings
Enlarge
See your visuals in a bigger preview by clicking the enlarge icon. Hover over the element to see the icon.
Click on the toggle button “View as table” to see the underlying data used for the current data visualization.
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.
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 element and copy embed code
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.
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 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¶
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
Users¶
1. Add users and give permissions - click on the ‘add users’ button to:
- add users - users who are already ‘members’ of your subscription but not yet members of your application
- 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.
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.
Advanced settings¶
Download or upload an application template
- 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.
