Front End – The extension in the Dashboard

The front end, also known as the extension integrated in the dashboard, is where the magic happens. This is the interface many users, both dashboard creators and as well as dashboard users, will see and interact with. The front end is designed with usability and flexibility on top of mind. Dashboard designers can control the look and feel of the extension and use the form builder to adapt the user entry forms to their needs.

Write Back Extreme extension for Tableau - Frontend

The behavior of the instance of the WriteBackExtreme extension in the dashboard can be configured in multiple ways. For example, you can choose between an extension as a tiled dashboard container (classic) or you can display the extension in a floating (pop-up) container and toggle it automatically with a button or mark selection. Whatever nature of your use-case, Write Back Extreme has got it covered!

Dashboard requirements

There are 2 requirements for the dashboard in order for the extension to work.

  1. The extension needs a worksheet which contains the username of the logged in user
  2. Depending on the module you are using the extension needs a worksheet which acts as a trigger for the extension. Username can also be within this worksheet.

Both requirements are prompted to the dashboard designer when using the extension on the first occasion in the dashboard. The sections below will explain how to use the WriteBackExtreme extension in your dashboard (once you have configured at least one schema in the Management Console).

You will need the logged in user

If you want to integrate the WriteBackExtreme extension in your dashboard, you need to make sure the extension can access the username of the logged in user. This is the first requirement you need to meet. The dashboard you want to use probably already has different sheets in it. Pick one sheet and add a calculated field with the Tableau Function USERNAME() to the detail of the marks pane of that sheet.

The calculation is a default Tableau Calculation like in the screenshot below. In this case the calculated field is called “Logged In User” and you can see it is added to the detail of my marks pane. This screenshot is taken form the Demo workbook that is also available on our free trial download page (register here). 

WBE Create and use a Calculated field to determine the Logged in User

So before you can use the WriteBackExtreme (WBE) Extension you need to:

  1. Create a calculated field containing the Tableau Function: USERNAME()
  2. Add the calculated field to the detail of your marks pane on at least one sheet

Once you have the username available on a sheet in your dashboard, you can start to add the extension to your dashboard. In the example below the Demo workbook for Write Back Extreme is used (available here)

Once the Username is available in the dashboard you can start to integrate the WBE extension in your dashboard. Below an animated GIF of the steps, performed in the WBE Gallery demo workbook on the DATA HELPER example dashboard.

Write Back Extreme - add the extension to your dashboard

Add the Extension to your dashboard

The steps to follow are:

  1. Drag the Tableau dashboard object “Extension” to the container where you want to place your extension
  2. You will be prompted to select a trex file. Use your explorer to find the Write Back Extreme extensions trex file (try it for free)
  3. The extension will load in the container of your dashboard and will prompt you to specify the user information
  4. Select the sheet where you added the calculated field with the USERNAME() function from above
  5. Select the calculated field (in this example the field “Logged In User”)
  6. You will be prompted to connect to a schema for this instance. Select the schema you have prepared for your use case in the Management Console
  7. Once you selected the schema you will be prompted what sheet you want to connect to and what dimension will trigger the extension (on mark selection). In the example we used a “DATA HELPER” schema that does not need a connection to an existing sheet nor dimension.
  8. Now you can complete the configuration of the extension by pressing “Save”. In the example we used a schema that already contained entries (from the Gallery Demo workbook”. Otherwise the list of entries would be empty of course

Done!

You are ready to start configuring the extension. Let us take you through the configuration options within WriteBackExtreme.

Configure the extension

If your extension is now integrated in the dashboard you can start fine tune the look and feel and behavior of the extension. First of all we will edit the connection to connect it to a sheet that uses the same Database Table as the connected schema. This is the “Missing Orders” sheet in the dashboard. All records are stored with a unique field called “id” so in the next animated GIF we will connect the existing sheet “Missing Orders” to the extension with the unique id as the connecting dimension.

Write Back Extreme - configure the connection to the schema

The steps to follow are:

  1. Click on the configuration wheel of the extension
  2. Clik on the pencil
  3. Select the sheet to connect to (in this example the Missing Orders sheet)
  4. Select the field to connect to (in this exampe the field “id” which is also present as a hidden column on the “Missing Orders” sheet

Now the extension is connected and interacting with a sheet in the dashboard.

General Tab

We will walk you through all the tabs in the configure screen, starting with the general tab. The general tab is where you will be able to connect to your schemas, style your extension to match your dashboards brand and more.

Schemas

The Schemas tab is where you connect to your schema created in the management console. You can add multiple schemas here to connect to different worksheets. Add, edit and delete schemas at this screen.

WriteBackExtreme Schema tab

Use the blue ‘+ New’ button to connect to your schema. You will be presented with a form where you can start by giving the schema a title and a description. Describe to your users what the extension is being used for in the description. Connect to your schema, choose the sheet you want this schema to be connected to and then the unique identifier field of that sheet. You are now connected!

WriteBackExtreme Data Helper Schema

Repeat these steps to add more schemas, all will be shown under this tab. 

User authentication

We use the username of the logged in user (derived with the Tableau Username() function) to audit, monitor and manage the operation of the extension. The username should be available on a Tableau sheet and we recommend to not change these setting once they are set properly.

WriteBackExtreme User Authentication

Show the extension in a popup window

Sometimes you need an instance of your WriteBackExtreme extension in a dashboard but you don’t want it to take up valuable dashboard space. With the Pop-Up function of the Write Back Extreme extension you can show the extension in a modal window once you triggered it by a mark selection (or button).

Below an animated gif of how to show the ADD DATA module in a pop-up window. In the example we use the Gallery workbook,, you can register for a free trial here.

Write Back Extreme extension for Tableau - Show the extension in a popup window to save vauable dashboard space

Steps to be taken when you want to show the WriteBackExtreme extension in a pop up window.

  1. Create a new floating container (Either Horizontal or Vertical)
  2. Place the new floating container over the dashboard area where you want to show the WriteBackExtreme extension in a pop-up
  3. Drag the Extension container to the new Floating container
  4. Adjust the size of the container to meet your lay-out wishes
  5. Open the configuration screen of the extension and on the first tab select “Pop Up”
  6. Select the second recommended option to show the extension in a floating container
  7. Select the newly created Vertical (or Horizontal) container
  8. Press the “Save” button on the top of the modal configuration window
  9. Once the settings are stored close the configuration window and ‘Reload’ the extension for the changes to take effect.

Theming

Match your dashboards style using Theming. We understand the importance to match your companies branding to keep your dashboards looking great. Change the colors of the whole brand along with text and system colors. Use the typography tab to change the font style and size. 

Tabs

WriteBackExtreme allows multiple schemas to be connected to one window. This allows users to connect to multiple worksheets using different schemas. These will be shown as different tabs within WriteBackExtreme.

Dashboard parameter actions

Dashboard parameter actions will populate the extension with your connected schema when selecting your mark. Connect different schemas to different worksheets and have them appear in one window. Follow our video tutorial to set this up and see the great value it will bring.

Mapping configuration

Use the Add Data module to add comments linked to a dimension within your worksheet, if that dimension is available within multiple worksheets the comment will be shown within WriteBackExtreme. To set this up head to our blog.

WriteBackExtreme Mapping

Worksheet-Schema Tab

The Worksheet- schema tab keeps you in control of your schema. The dashboard creators can format the style of the form and the behavior of the schema from this tab. You will see different options depending on the module you’re connected to.

General (All modules)

Show title/description

In the general tab of the worksheet schema, this allows you to show/hide the title and description of your schema. Let your users know what the extensions use is for, or not, it’s your dashboard!

Refresh Mode

Enable a refresh on the data source when the user saves changes. This ensures data is always up to date after a save.

Refresh options (Data Helper & Add Data Only)

When saving any changes within your form, the extension will automatically refresh when enabling. It’s also possible to show the refresh button within the extension, this will help when refreshing the data takes more time. Note: These features only work if the data helper sheet is connected with a worksheet!

Refresh Button (Data Helper & Add Data Only)

Add a refresh button to your window. This can be useful for when refreshing data takes more time.

General Layout options for Add Data

Clearing the selection will…

Whenever you select a mark in the connected sheet, the extension will filter and show the appropriate data, decide whether to show all data or exclude when clearing your selection.

Allow Global Comments

WriteBackExtreme allows you to add comments and data to one, none or multiple selected records in your dashboard. Dashboard creators can now force their users to only add data on a single data point. For example this will prevent any loose comments not linked to a specific mark. More control for the creator resulting in clean and focused dashboards.

Allow Multi select on marks

Enable the option to add data to multiple marks (data points) at once. This will create 1 row of data in the schema with multiple mapping rows. For example if you would like to comment on the top 3 selling items at once, highlight each one, add your comment highlighting the good sales! 

 

WriteBackExtreme Global Comments

Filter options

Use these options to limit the amount of rows visible in the extension. Filter on certain columns you wish to have present in the extension, add more if required. Filter on date so show a certain amount of data from the last 30 days for example. Also possible to filter the top rows by adding a value in the box.

WriteBackExtreme Filter

General Layout options for Data Correction

Layout

Change the layout form to a vertical layout which would help if you would want to create a form. The default layout is horizontal where fields can be side by side, allowing for a more compact form.

Clearing the selection will…

Whenever you select a mark in the connected sheet, the extension will filter and show the appropriate data. Decide whether to show all data or not.

Interpolate & Bulk Edit

Data Correction can be used to clean data, enable power tools to bulk edit your values. There’s possibilities such as adding, subtracting, dividing and multiplying with a chosen value. If there are empty values use our powerful Interpolate tool! Sometimes you want to fill in the missing data points automatically, based on related data. This is something the build-in interpolation function can help you with. Interpolation is a method of constructing new datapoints within the range of a set of known datapoints. To use the interpolation function of the Data Correction module, select multiple fields. You must provide data that can be used to interpolate, i.e. the datapoint prior and the datapoint latter to the missing datapoints. When you selected the correct datapoints, you can use the calculator icon above the column and select “Interpolate” to fill in the missing datapoints.

Refresh data sources on save

Toggle a refresh of all relevant data sources when the user saves changes. This will keep all connected data sources up to date on each save.

Field Formatting Tab

There are many field options to have in your form. The field types are Single Line, Paragraph, Number, Multi Select, Boolean and Date fields. Here you can change the appearance, layout and behavior of the fields in the form.

WriteBackExtreme Field Formatting

Type of form field – Single Line

Creating a schema in your WriteBackExtreme management console using the Single line text as your Field Type will give you flexibility in the front end when configuring the type of form field.

Type of form field – Single Line

Map input, Emoticons and of course text can be used. If you create a single line column in the management console you can change the layout to a Map component style. You can use specific options for the map like a default location and more. Map input allows you to use the built in mapping feature within your form to pinpoint an exact location which will be written back to your database. A super easy and powerful feature. Use the emoticons to react on sales for an example and add some color to your dashboard!

Type of form field number 2

Paragraph

This will be the content of your form, a description of your changes, a message to accompany your input. In the configuration screen enable Rich Text (WYSIWIG). Many options to format your text will be available in your text box. Header and paragraph styles, lists and much more.

WriteBackExtreme Rich text

Number

Use the number field to show numbers, a percentage and currency in the form.

Rating

A very good use case for WriteBackExtreme is allowing users to rate certain dashboards using our star method. The Rating option presents a stars where users can click on each star which will then write back the score to your table, for example. Configure how many stars will be shown, size and spacing.

Slider

Convert the number to a slider, this would be ideal for users to use if a precise range isn’t necessary and an approximate would suffice.

Progress bar

As it says on the tin, users can update their dashboards using the progress bar to share their projects progress. A clear indication of how well your projects are doing.

WriteBackExtreme Number

Using the Multi-Select you can decide to have the selections shown in a drop down menu or use our new Radio button option. Decide what will best suit your dashboard and user base. Using the radio button allows users to quickly and easily choosing their selection with a click of a button.

 

WriteBackExtreme Dropdown searchable
Radio button form

Boolean

If your form requires a simple true or false answer then use the Boolean field type. This can be formatted to display a simple checkbox or a switch, to show a completed field in your form. Use the Boolean field type to allow your users can give a clear indication of their thoughts by giving it a big thumbs up or down! Edit the color under format so when the users check a clear color will be shown in the form.

Date/Datetime

WriteBackExtreme Date

When creating a schema you will get the option to include the time to be shown in the form. Format the label to show what’s being displayed in the form. It’s now possible to auto populate an updated_at and created_at field. For updated_at it will every write action generate a new timestamp and store it in this column and for created_at; will only set an timestamp on create of a new record. When updated_at is tick created_at will automatically be disabled. In the schema field we keep an option for auto_datetime_updated and auto_datetime_created, both are booleans.

WriteBackExtreme Auto Update Datetime

Use the Form Builder

With the flexible Form Builder of WriteBackExtreme you can control what the form for your WriteBack users looks like. You control what fields are mandatory, what fields are shown in the form and what overview look like.

First of all it is important to know that the properties of the fields in your schema (Created in the Management Console, check this section to learn more on the Management Console and creating/managing schemas) are of great influence in using the Form Builder.

  • Non nullable fields in your schema are always mandatory fields in your Form Builder. If you want to use a non mandatory field in your form, make sure it is ‘nullable’ in your underlying schema.
  • Field types are set in the Schema and cannot be changed with the Form Builder. You cannot change a number field into a text field with the Form Builder.

The sections below will cover these basic Form Builder options:

  1. Change the order of the fields
  2. Set column width in the form
  3. Show Hide fields in the overview and/or edit forms
  4. Enable / Disable mandatory fields

We will use the WriteBackExtreme Gallery demo workbook with the DATA HELPER dashboard to illustrate the possibilities. You can download a copy of the demo workbook by registering for a free trial over here. For this demonstration we configured the DATA HELPER Demo schema to have a few nullable fields so we can illustrate the usage of mandatory and non mandatory fields in the forms. Learn more about managing your schemas in the Management Console over here.

Change the order of the fields

Write Back Extreme Form Builder - Change order of the Fields

The steps to change the order of the fields in your forms are:

  1. Goto the configuration screen of your extension by clicking the Pinwheel and select “CONFIGURE EXTENSION”
  2. In the modal (pop up) select the “Worksheet-schema” option in the colored horizontal menu bar
  3. Select the second tab called “Form Builder”
  4. click on the up/down arrows present for every field to change the order of the fields
  5. Make sure you press the “Save” button in the top right corner of the colored menu bar to save your changes.

Use mandatory and non mandatory fields

By default all fields being used in the extension are set to Mandatory fields in the entry form. The Form Builder allows you to also mark these fields as non mandatory. You can only set fields to non mandatory in the Form Builder if the fields are nullable in the “Schema” you are using in the extension. Learn more about creating and managing schemas in this section of the Management Console. When a Schema field is “nullable” you can not set it to non mandatory in the Form builder. The form builder will show a pink switch indicating that the field cannot be set to non mandatory.

Write Back Extreme Form Builder - Set mandatory and non mandatory fields

The steps to change the order of the fields in your forms are:

  1. Go to the configuration screen of your extension by clicking the Pinwheel and select “CONFIGURE EXTENSION”
  2. In the modal (pop up) select the “Worksheet-schema” option in the colored horizontal menu bar
  3. Select the second tab called “Form Builder”
  4. Change the switches to set fields as “Required” (mandatory) or “Not Required” (non mandatory)
  5. Make sure you click the “Save” button in the top right corner of the colored menu bar to save your changes.

Show/Hide fields with the Form Builder

The Form Builder allows you to show and hide fields of your underlying schema in the edit and overview forms of your extension. Make sure that hidden Mandatory fields do contain the proper content otherwise you will not be able to store your form entry in the database. You can show/hide any field you want in the edit form of the extension or in the overview (list view) of the extension. Make sure you do not hide forms that require input before storing otherwise you will not be able to save the entry (when a hidden field without content is mandatory) or end up with NULL values.

Write Back Extreme Form Builder - Show and hide fields in your forms

The steps to change the order of the fields in your forms are:

  1. Goto the configuration screen of your extension by clciking the Pinwheel and select “CONFIGURE EXTENSION”
  2. In the modal (pop up) select the “Worksheet-schema” option in the colored horizontal menu bar
  3. Select the second tab called “Form Builder”
  4. Change the switches to show or hide a field in the edit form (user input – entry of data) or the overview (list view in the extension that in some occasions is used to show all entries)
  5. Make sure you click the “Save” button in the top right corner of the colored menu bar to save your changes.

Read Only

It may be important to show fields but for them not to be editable. Enable Read Only on the fields that should be left alone. These fields may have been dynamically filled so editing shouldn’t be a possibility.

Change the width of the fields in the edit form

Write Back Extreme Form Builder - Change width of the Fields in the edit form

The steps to change the order of the fields in your forms are:

  1. Goto the configuration screen of your extension by clciking the Pinwheel and select “CONFIGURE EXTENSION”
  2. In the modal (pop up) select the “Worksheet-schema” option in the colored horizontal menu bar
  3. Select the second tab called “Form Builder”
  4. Change the Width of each field from a preselected drop down
  5. Make sure you click the “Save” button in the top right corner of the colored menu bar to save your changes.

Use dynamic default values in WriteBackExtreme

Use values that are present in your dashboard and store them in fields of your form. This feature hugely improves your flexibility and control. In this way, you can also gather information on dimensions and measures from your dashboard without user input! To add have this powerful feature, open up the configuration screen within your extension. Click on the Worksheet-schema tab where the list of your schemas will be shown, click on desired schema and open the Form builder tab.

Write Back Extreme Form Builder - Set mandatory and non mandatory fields

 

Under ‘Default value’ header is where you will be able to make your values dynamic. Simply click underneath the Default value header on the schema(s) you wish to change to have dynamic values. You will be presented with a pop up window where you can choose between none, static & dynamic values. When choosing dynamic simply choose your desired worksheet and column within that worksheet. NOTE: Make sure that the data type of the selected column is similar to that of the form field. See it in action here: Dynamic values

Write Back Extreme Form Builder - Set mandatory and non mandatory fields

Auto populate a dropdown field with values from a sheet on your Tableau Dashboard

An advanced way of formatting a field in your dashboard is to auto populate the content of a dropdown field with values obtained from a (filtered) sheet on your dashboard. If for instance your dashboard uses global filters or you want your users to be able to pick a relevant country/state based on the filtered view in your dashboard, this is an efficient way to show only relevant content in your WriteBackExtreme dropdown field.

The example below shows how you can auto populate a dropdown field to show the States where we actually sold products of a selected Product Sub Category in the dropdown of an annotation form.

For the demo we used the Gallery demo workbook with the “Collaboration Dashboard. This technique of dynamically populating dropdown fields will also work for the other modules and templates. Make sure you have an available Drop Down field in your schema (click here to learn more on creating schemas in the Management Console)

With the Management Console we first created a schema in which we added a “Dropdown Selection” field called “State” which has three default values (California, Texas and Nevada just for demonstration purposes). So by default users are only able to select one of these three states. In the Extensions configuration screen we then use the Field Formatting options to autopopulate the “State” field based on the map with states available in the dashboard. This will overrule the default content of the dropdown and allow you to show the States that are available in the map on the dashboard (either filtered or unfiltered).

Write Back Extreme - Auto populate a form field with content from a sheet

To create an auto populating field in your form please make sure you have a Drop Down Select field in your schema. If you do not know how to manage schemas in the Management Console, check this section.

  1. Go to the configuration screen of your extension by clicking the Pinwheel and select “CONFIGURE EXTENSION”
  2. In the modal (pop up) select the “Worksheet-schema” option in the colored horizontal menu bar
  3. Select the second tab called “Field formatting”
  4. Now select the Drop Down Select field you want to automatically populate. In the example we used the field “State”
  5. In the Field formatting screen now check the box next to “Enable dynamic population from Tableau”
  6. Select a worksheet containing the column you want to use as values for the dropdown. In the example we select the worksheet “States”
  7. Select the column from the selected worksheet in the above step. In the example we selected the column “State”
  8. Make sure you press the “Save” button in the top right corner of the colored menu bar to save your changes.
  9. The Drop Down Select field will now be automatically populated with the column “State” from the “States” worksheet