Introduction

This is the complete Molnify Reference Guide. It covers:

Creating an Application

Creating a Molnify application can easily be done in either Excel or Google Sheets. You don't have to know any programming language. Basic Excel/Sheets knowledge is all it takes. Simply color your cells to let Molnify know what elements you want, such as inputs, outputs and more.

Using Excel

If you use Excel, upload your Excel file to Molnify to create your application.

When you want to update an Excel-based app, simply upload the Excel file again with your changes. Keep in mind to always specify the same ID explained in the section Metadata.

Using Google Sheets

If you use Google Sheets, you have two options for creating a Molnify application:

  • Either link an existing Google Sheets document to Molnify, or
  • Create a new Google Sheets document from scratch and share it with Molnify.

If you want to update a Google Sheets-based application, go to your application and click the Update button in the sidebar once you have made changes to your model. Alternatively, go to My Apps and update the app from there.

App Generator

Regardless of whether you're using Excel or Google Sheets, you may find the Molnify App Generator useful for setting up your app fundamentals easily. It lets you experiment with metadata and styling. Once you're happy, simply download the Excel file with all your settings or visit your automagically created Google Sheets file. Continue editing your app in either Excel or Google Sheets.

Overview

Molnify turns a spreadsheet into an app containing different elements: inputs, outputs, charts, tables and actions. In short, inputs let the user fill in data, while outputs, charts and tables show results. Actions are used to perform tasks such as sending emails and much more. The colors of your spreadsheet cells tell Molnify what types of elements to create.

The basic structure for an input and output consists of three cells: (1) title, (2) value and (3) user interface (UI string). The UI string decides how an input or output is presented and is optional. If left out, Molnify will choose the most appropriate representation.

Colors

Use thesse colors to let Molnify know what types of elements to create.

Remember to always use the standard colors in Excel and Google Sheets.

ABCDE
1 Value A 5 A Chart Series
2 Value B 10 Value A =B1
3 Value B =B2
4 Product =B1*B2
5
6
7

Copy for Excel Copy for Sheets

This would create a fully functional app with two inputs (Value A and Value B) with default values of 5 and 10. An output box, titled Product, would show the product of the two inputs. A chart, titled A Chart, would plot the two inputs. The purple cells set the metadata; i.e., the name would be My App and its ID would be myApp.

User Interface (UI) String

To customize an input or output, you may specify different settings in the cell to the right of the actual input/output (cell C1 in the example). We call this the UI (user interface) string. All these options are separated by ;. E.g., min=0;max=50.

ABC
1 Label 0 min=0;max=50

Copy for Excel Copy for Sheets

This example would generate a numeric input titled Label with a default value of 0. Its UI string is min=0;max=50, so only values between 0 and 50 would be allowed.

Inputs

If you color a cell green, you will get an input. There are many different types of inputs, such as text fields, sliders, dropdown menus and more.

  • The actual input: The green cell in the middle contains the actual input element
  • Title: Specify the title of the input to the left
  • UI string: The cell to the right contains UI options for the input
  • Tooltip: Add a comment to the green cell to make Molnify show a tooltip when you hover over the title of the input

Example:

ABC
1 Label 0 min=0;max=50

Copy for Excel Copy for Sheets

This example would generate a numeric input titled Label with a default value of 0. Its UI string is min=0;max=50, so only values between 0 and 50 would be allowed.

UI string: Multiple different options are avaiable. They are described for each of the different inputs.

Button Group

Try It Download

By having data validation turned on for an input cell and assigning a list of values, Molnify will show a group of buttons - one for each value in the list. If the list is long, Molnify will present a dropdown instead.

Example:

ABC
1 Select Country Sweden select

Copy for Excel Copy for Sheets

This example would create an input titled Select Country with a default value of Sweden. Its UI string is select, which would tell Molnify to show this as a button group regardless of the length of the data validation list.

UI string: select. This will force Molnify to show buttons instead of a dropdown even for long data validation lists.

Date and Time

Try It Download

To get an input field rendered as a datepicker or timepicker, simply format the cell as date or time in Excel. You may force Molnify to interpret the cell as either by specifying date or time in the UI string. You may use placeholders just like in other text inputs.

Example:

ABC
1 Date 2020-01-01 date

Copy for Excel Copy for Sheets

This example would create a datepicker titled Date with a default value of 2020-01-01. Its UI string is date.

Example:

ABC
1 Time 12:00:00 time

Copy for Excel Copy for Sheets

This example would create a timepicker titled Time with a default value of 12:00:00. Its UI string is time.

UI string: date or time.

Divider

Try It Download

Adds a horizontal divider with the specified title above the input field. The divider is shown and hidden along with the input it's associated with.

ABC
1 Name John Doe dividerName=Personal Information

Copy for Excel Copy for Sheets

This example would create an input titled Name with a default value of John Doe. Its UI string is dividerName=Personal Information, which would insert a divider with the title Personal Information above the input.

UI string: dividerName=divider title where divider title is the title of your divider.

Try It Download

Specifies that the input field should be presented as a dropdown menu containing the items of a data validation list. This is the default for long data validation lists.

Example:

ABC
1 Select Country Sweden dropdown

Copy for Excel Copy for Sheets

This example would create an input titled Select Country with a default value of Sweden. Its UI string is dropdown, which would tell Molnify to show this as a dropdown menu regardless of the length of the data validation list.

UI string: dropdown.

To enable multiple selections in a dropdown menu, add multiple to the UI string. The selected values will be concatenated into one semicolon-separated text string. E.g., selecting Sweden and Denmark will result in a value of Sweden;Denmark.

To have multiple options selected as default, add JavaScriptAfterLoad to your metadata and set it to $("[cell='Sheet1!B3']").val(["Sweden", "Denmark"]).change(). Exchange Sheet1!B3 for the cell corresponding to your dropdown. Read more about triggered JavaScript actions here.

Example:

ABC
1 Countries dropdown;multiple

Copy for Excel Copy for Sheets

This example would create an input titled Countries with no default value. Its UI string is dropdown;multiple, which would instruct Molnify to create a dropdown menu enabled for multiple selections.

UI string: dropdown;multiple.

File Upload

A file upload input lets your users upload files. Referencing the input (e.g., =B1) will give you a comma-separated string of URLs to the uploaded files. E.g., https://files.myserver.com/files/anImage.jpg,https://files.myserver.com/files/anotherImage.jpg

Next to the file upload area is a gallery of the uploaded files associated with the specific input.

Example:

ABC
1 Upload Files fileUpload;maxFiles=10

Copy for Excel Copy for Sheets

This example would create an input titled Upload Files. Its UI string is fileUpload;maxFiles=10, which would tell Molnify to create a file upload area and gallery. It would allow for a maximum of ten files to be uplodad.

UI string: fileUpload. Add, e.g., maxFiles=10 to limit the number of files to ten.

Limit accepted file types by setting acceptedFileTypes. Specify file types by entering comma-separated MIME type and file extension. E.g., image/*,application/pdf to accept all types of images and PDFs. File extension can be a wildcard (*).

Info Text

Try It Download

An info text is actually not an input, but a descriptive text placed among your inputs. For a longer info text, preferably use longInfoText instead.

ABC
1 Description This may be... infoText

Copy for Excel Copy for Sheets

This would create an info text with the title Description and the text This may be.... Its UI string, infoText, tells Molnify to render it as an info text.

UI string: infoText or longInfoText.

Signature

Try It Download

Provides a signature area as an input. Simply specify signature as the UI string.

Example:

ABC
1 Sign Here signature

Copy for Excel Copy for Sheets

This would create a signature input with the title Sign Here. Its UI string, signature, tells Molnify to render it as a signature area.

UI string: signature.

Signature as SVG

The default data format for a signature is Base30. To retrieve the SVG code, you need to add a second text input, which can preferably be hidden. In the UI cell of the signature, add jsOnChange=copySVGToTextInput. Ensure that the text input to receive the SVG code is on the next row in the spreadsheet. Once this is set up, you can use the SVG code from the text input in, e.g., HTML panels, to show the actual signature. The example below illustrates how to retrieve the SVG code and display the signature image in an HTML panel.

ABC
1 Sign Here signature;jsOnChange=copySVGToTextInput
2 SVG hidden
3 Signature =B2 html

Copy for Excel Copy for Sheets

UI string: signature;jsOnChange=copySVGToTextInput.

Slider

Try It Download

Specifies that the input field should be presented as a slider.

Example:

ABC
1 Label 10 slider;min=0;max=50

Copy for Excel Copy for Sheets

This example would create a slider titled Label with a default value of 10. Its UI string is slider;min=0;max=50, which tells Molnify to present this as a slider with a range of 0-50.

UI string: slider;min=minimum;max=maximum where minimum and maximum define the range of the slider.

To set the size of the steps, use delta, e.g., specify delta=0.1 for steps of 0.1.

Use gridNum to specify how many ticks you want. E.g., specify gridNum=0 for have a slider without any ticks.

Tabs

Try It Download

Add a tab with a specified title. All inputs after this up until the next tab will be placed in this tab. The tab is shown and hidden along with the input it's associated with. This means that adding conditional show to the first input in a tab also controls visibility of the whole tab.

ABC
1 An input tab=Second tab

Copy for Excel Copy for Sheets

This would create an input field with the title An input. Its UI string, tab=Second tab, tells Molnify to add this input and all following inputs in the tab named Second tab.

UI string: tab=title where title is the tab title.

Text Field

Try It Download

This is the default input type.

Example:

ABC
1 Label 0 min=0;max=50

Copy for Excel Copy for Sheets

This example would generate a numeric input titled Label with a default value of 0. Its UI string is min=0;max=50, so only values between 0 and 50 would be allowed.

For a numeric text field, you may specify the delta, i.e. the increment and decrement applied when clicking the plus and minus buttons. Use delta=0.1 for an increment and decrement of 0.1. You may also use min and max (similar to sliders) for allowed min and max values.

Add a symbol or short text before and/or after the field by specifying preFix and postFix, respectively. E.g., postFix=pcs to have pcs to the right of the field.

Text Area

To turn a text field into a larger text area, use the UI string textArea.

UI string: textArea.

Barcode

If you're planning on using a barcode scanner for entering data into the input, specify barcode as the UI string to make the text field automatically select all text upon hitting the ENTER key.

UI string: barcode.

No Buttons

For a numeric input field, plus and minus buttons are shown next to the field by default. To hide them, specify noButtons in the UI cell.

UI string: noButtons.

Placeholder

A placeholder is a text that helps the user understand an input field. Specify this by adding placeholder to the UI string. E.g., placeholder=This is a placeholder.

UI string: placeholder=A placeholder.

Validation

Input validation prevents the user from entering improperly formed data. For instance, you may only want to allow the user to enter A-Z and a-z, and nothing else. The following example would do exactly that: regEx=[^a-zA-Z].

UI string: regEx=regular expression, where regular expression is the regular expression you want to apply.

Toggle Button

Try It Download

By entering TRUE or FALSE in a cell, Molnify will present this as a toggle button.

Example:

ABC
1 A toggle TRUE

Copy for Excel Copy for Sheets

This would create a toggle button with the title A toggle. Since the value is TRUE, the button would be active by default.

Description

To show a descriptive text next to a toggle, specify description in the UI string. E.g., description=A description.

UI string: description=A description.

Advanced

Exclude from Calculation

You may exclude certain inputs from being passed along at calculation.

UI string: NOCALC.

Initialization from URL

You can initialize inputs by passing parameters in the app's URL. Add a variable name to the inputs you want to initialize. Then simply append ?variable_name=VALUE to your app URL, e.g., app.molnify.com/app/myForm?firstName=John&lastName=Doe. This would initialize the input with variable name firstName with John and lastName with Doe.

UI string: variable=name.

Logged in User

If you would like to use the identifier of the logged in user, you can add user in the UI string. The identifier is usually the user's email address, but can also be, e.g., a personal number. Molnify will add the identifier of the logged in user to this field (or an empty string if no user is logged in). The input will not be shown in the app. You can then use this value to e.g., add logic to show specific values, or even have the values of inputs depend on which user that has logged in.

UI string: user. To specifically get the email or personal number, use user.email or user.identificationnumber.

To check what user category the currently signed-in user has, add a TRUE/FALSE input with the UI string superuser or manager.

Reset When Hidden

If you wish to reset an input to the value it had in the Excel file upon hiding, add resetWhenHidden to the UI cell. When shown again, the input regains the value it had prior to being hidden. Also refer to Conditional Show.

UI string: resetWhenHidden.

Outputs

If you color a cell red, you will get an output. There are different types of outputs, such as output boxes, HTML panels and more.

  • The actual output: The cell in the middle contains the actual output element
  • Title: Specify the title of the output to the left
  • UI string: The cell to the right contains UI options for the output
  • Description: Add a comment to the red cell to make Molnify show a description within an output panel or below an output box
ABC
1 Result =SUM(B2:B20) icon=fa-money

Copy for Excel Copy for Sheets

This would create an output box titled Result. Its value is calculated by =SUM(B2:B20). Its UI string is icon=fa-money, which would tell Molnify to show the Font Awesome icon fa-money next to the value inside the output box.

UI string: Multiple different options are avaiable. They are described for each of the different outputs.

Output Box

If you color a cell red, you will get an output box placed in an output panel.

Try It Download

Example:

ABC
1 Value =B3*B4 icon=fa-flag;background=gray;color=white

Copy for Excel Copy for Sheets

This example would create an output box titled Value. Its value is calculated by =B3*B4. Its UI string is icon=fa-flag;background=gray;color=white, which would tell Molnify to show the Font Awesome icon fa-flag next to the value inside the output box, set the background color to gray and the text color to white. If you add a comment to the red cell, it will be displayed below the value.

Output Box Background Color

Use the property background to set a custom background color of an output box.

UI string: background=color where color is the desired background color, e.g., background=blue or background=#ff00ff.

Output Box Icon

You may specify a Font Awesome icon to display inside an output box. If you don't want any icon, specify none as the icon.

UI string: icon=fa-icon where fa-icon is the desired Font Awesome icon.

Output Box Text Color

Use the property color to set a custom output box text color.

UI string: color=color where color is the desired text color, e.g., color=#ffffff.

Hidden Output Box

You may hide individual output boxes by specifying hidden as the UI string of an output box. Read more about hidden outputs.

To hide the whole panel containing output boxes, refer to Panel Visibility.

HTML Panel

Try It Download

Molnify can render the result in a cell as an HTML-formatted panel. Color the Excel cell red (specifying an output) and set the UI string to html.

Example:

ABC
1 An HTML Panel ="<b>This is: </b>" & A1 html

Copy for Excel Copy for Sheets

This would create an HTML-formatted panel titled An HTML Panel. Its value is set to ="<b>This is: </b>" & A1. The text shown in the HTML panel would thus be This is: An HTML Panel. Its UI string, html, is what tells Molnify to show this as an HTML-formatted panel.

UI string: html. If you wish to hide the copy button, simply specify hideCopy in the UI string.

People Matrix

Try It Download

To get a value from 0 to 100 represented as part of a matrix of 100 people, specify peopleMatrix as the UI string.

ABC
1 Number 10 peopleMatrix

Copy for Excel Copy for Sheets

This example would create a People Matrix titled Number. Its value would be 10. Its UI string, peopleMatrix, tells Molnify to display the value as 10 highlighted people out of 100.

UI string: peopleMatrix.

People Matrix Options

Use color in the UI string to set the color of the highlighted "people". Example: color=blue.

Specify icon in the UI string to set a custom Font Awesome icon. Example: icon=fa-money.

Use rows and columns in the UI string to set the number of "people". Example: rows=5;columns=5.

Panel Description

Try It Download

To add a descriptive text to an output panel, a panel containing a chart or an HTML output panel, simply add a comment to the output cell, the chart title cell or the HTML output cell.

Panel Placement

To force a panel to be in the left or right column, specify leftColumn or rightColumn in the UI string.

Panel Visibility

If you want a panel to be hidden, specify panelHidden in the cell to the right of the panel content (the UI string). To make a panel containing output boxes hidden per default, set the metadata property OutputBoxPanelHidden to TRUE.

Formatting

Number Formatting

Numbers are generally displayed using the client's locale. For instance, the thousand separator in some countries is , and in others it's a space ( ), etc.

If you introduce a non-number character, e.g., a currency, Molnify interprets the number as a text string, and number formatting is lost. You can easily add your preferred formatting in Excel using a couple of functions. Below is an example.

Let's say you have the number 3456456 in cell B5. To have this displayed with a $ sign and thousand separators, you can enter ="$ " & TEXT(B5;"### ###"). To use a custom thousand separator, e.g. periods (.), you can simply put ="$ " & SUBSTITUTE(TEXT(B5;"### ###");" ";"."). This would put spaces as thousand separators, and then exchange them for periods.

Date Formatting

In some instances, you may have a date in the form of a number representing days from January 1, 1900. To present such a number in a more readable way, you may format it as a date, e.g., as YYYY-MM-DD using this Excel formula: =IF(B1>0;YEAR(B1)&"-"&TEXT(MONTH(B1);"00")&"-"&TEXT(DAY(B1);"00");"N/A"), where B1 contains the number.

Charts

To visualize data as a chart in Molnify, color the data cells blue.

  • The actual data: The blue cells contain the actual chart data
  • Title: Specify the title of the chart in the topmost left cell
  • UI string: The topmost right cell contains UI options for the chart
  • Description: Add a comment to the chart title cell (i.e., the topmost left cell) to add a description above the chart

Try It Download

Molnify interprets cells colored in blue as chart data. Molnify automatically analyzes your chart data and selects the appropriate chart representation. If you want to force Molnify to use a certain chart type, specify barChart, pieChart, lineChart, lineBarChart or waterfallChart in the UI string.

Bar Chart

Try It Download

Color your bar chart data blue, name your series and datapoints and add a title.

Example:

This would create a bar chart with two series and six datapoints. The chart title, Graph, is in cell A1. The series names are specified in cells B1 and C1. The labels for the datapoints are in column A. The UI string, in cell D1, is xAxis=Month;yAxis=Rate, which sets titles for the X and Y axes.

UI string: barChart.

Pie Chart

Try It Download

Color your pie chart data blue, name your datapoints and add a title.

Example:

This example creates a pie chart titled A Pie Chart with three datapoints. The UI string, pieChart, instructs Molnify to show the data as a pie chart.

UI string: pieChart.

Line Chart and Line/Bar Chart

Try It Download

Molnify can present your data as a line chart or a combined line/bar chart. Color your chart data blue, name your series and datapoints and add a title.

For a combined line/bar chart (UI string: lineBarChart), the first series represents the bars and the second series represents the line. Specify atLeastSync to make atLeast=value apply to both Y axes.

This would create a line chart titled Line Chart with two series (An index and Another index) and twelve datapoints. The UI string, lineChart, instructs Molnify to present the data as a line chart.

UI string: lineChart or lineBarChart.

Waterfall Chart

Try It Download

Color your chart data blue, name your series and datapoints and add a title. Enter e whenever you want to present an accumulated value.

Example of how to create a waterfall chart titled A Waterfall Chart with two series (Rocks and Spoons). e lets Molnify know to show the accumulated value. e is actually also what makes it a waterfall chart without explicitly specifying it in the UI string. In this example, atLeast is set to 20 in the UI string (atLeast=20), meaning that the value 20 will always be included on the Y axis.

UI string: waterfallChart.

Geo Chart

Try It Download

A special kind of chart is the geo chart, which shows a world map with values specified for different countries. The chart is specified the same way as a bar chart with one series. Simply write geoChart in the chart's UI string. Countries are defined using country codes (e.g., US, SE, DK, NO) as datapoint labels.

UI string: geoChart.

Appearance

Height

To set the height of a chart, add the desired height as CSS in your metadata. E.g., div[cell='Sheet1!C7:C33'] svg { height: 2000px; } for a chart in cells C7:C33.

Hide Controls

UI string: noGroupedStackedControls hides the grouped/stacked buttons in a bar chart to .

UI string: noControls hides the grouped/stacked buttons and the series legend in a bar chart.

Horizontal Bar Chart

UI string: horizontal=TRUE specifies that a bar chart should be rendered horizontally.

Map

UI string: map shows only a certain region (e.g., map=se_mill for Sweden) in a geo chart.

No Grid Lines

UI string: noGridLines hides all grid lines.

Show Values

UI string: showValues makes values shown directly in the chart (applies to bar charts).

Steps

UI string: steps turns a line chart into a step chart.

Axis Options

Axis Titles

UI string: xAxis=title and yAxis=title set the titles for the X and Y axes.

Axis Decimals

UI string: axisDecimals=decimals sets the number of decimals to display on the axes.

At Least

UI string: atLeast=value forces a certain value to be included on the Y axis. Example: atLeast=100 to always include the value 100 in the chart.

Center Zero

UI string: centerZero makes the value zero always centered in a bar chart.

Hide Max and Min Values

UI string: hideMaxMin hides the max and min values.

Y Axis Ticks

UI string: yAxisTicks=value, where value is the number of ticks to always display on the Y axis.

Labels

No Word Wrap

UI string: noWordWrap disables word wrapping for labels in a horizontal bar chart.

Stagger Labels

UI string: staggerLabels=TRUE/FALSE enables/disables staggering of the labels on the X axis. This is otherwise automatically decided by the number of labels.

Series

Series Colors

Setting custom chart series colors is done by adding them to the metadata CSS.

Example: .chart-series0 { color: black } .chart-series1 { color: red } to make your first series black and your second series red.

Series in Columns or Rows

UI string: seriesInColumns instructs Molnify to use the columns as series and the rows as data points.

UI string: seriesInRows instructs Molnify to use the rows as series and the columns as data points.

Stacked Series

UI string: stacked renders a bar chart with stacked series as default.

Description, Placement and Visibility

Refer to Panel Description, Panel Placement and Panel Visibility.

Tables

Try It Download

In order to present aggregated data as a table, color your data cells blue. Column titles and row titles are entered outside the blue area. Instruct Molnify to create a table by specifying table as the UI string. The table panel title is specified in the top left corner cell.

Example:

Example of how to create a table with the panel title A Table. Its UI string, table, tells Molnify to display your data as a table instead of a chart.

UI string: table renders your data as a table.

Actions

Try It Download

Molnify can perform a wide range of different actions, such as sending emails and adding data to Google Sheets spreadsheets. Cells specifying an action are colored yellow.

Example:

This example creates an email action, since type is set to email. The action button's title will be Send email. Other options, such as to, from, subject and content, are specified on separate rows.

General Action Settings

These are some general action settings that apply to most actions. Apart from styling, they are specified just like all other action options.

This example would create an email action (however, to, from, subject and content would also be needed). The action button is titled Click Here and is named Action1. The button is configured to be displayed at the bottom of the page. Finally, the button would only be visible if cell Sheet1!B1 is TRUE.

Conditional Show

Action buttons also support conditional show. Simply specify showIfCell: cell_address and showIfValue or showIfValueNot: value_to_match . Also refer to the section on Conditional Show.

Hidden

Set hidden to TRUE to hide the action button.

A hidden action can be called with JavaScript like this: performActionWithID("actionsBtn0"), where actionsBtn0 is the first action button. Alternatively, you can perform an action which has a specific title or name with performActionWithTitle("Send"), where Send is the title of the action button, and performActionWithName("action1"), where action1 is the name of the action.

Name

name: Used when calling several actions using "multiple actions".

Position

position: Specify bottom if you want the action button at the bottom of the page (default is below all inputs).

If you prefer to have your action buttons among your inputs, for instance on a certain tab, you can accomplish this by adding an Info Text input and set its content to call the actual action. Remember to also hide the actual action button. Here's an example for an input button that calls the second action (specified by 1):

<a href="javascript:performActionWithID('actionsBtn1');"><button type="button" class="btn btn-sm btn-success buttonMargin molnifyActionButton">Action 2</button></a>

Request Handler

requestHandler: Set to noModal to show no modal window while the action is being performed.

Skip or Disable an Action

Use skip to disable an action. Perfect for skipping one or several actions in a multiple action.

skip: Set to TRUE to disable the action. TRUE may of course be the result of a function.

Styling

The action buttons may be styled with custom colors by adding CSS to the CSS metadata cell, e.g., #actionsBtn0 { background-color: #0000ff; border-color: #0000ff; } in order to set a blue background color and blue border color on the first action button.

Success Handler

Specify what happens when an action successfully finishes:

  • successCalculate: Perform a calculation after a successful action
  • successHTMLElementId and successHTMLElementContent: Update the specified HTML element with the provided content
  • successNewTabURL: Open a new tab with the specified URL
  • successRefreshScenarioList: Refresh the list of scenarios after a successful action
  • successSilent: Do nothing
  • successText: Show a text message
  • successURL: Redirect the browser to the specified URL

Note that if you specify a success handler for a multiple action, this will override success handlers specified for the individual actions.

Title

title: Title displayed in the action button.

Type

type: Type of action.

Email

Try It Download

Add this action to create a button that sends an email.

Example:

This example creates an email action, since type is set to email. The action button's title will be Send email. Other options, such as to, from, subject and content, are specified on separate rows.

Options
  • type: email
  • to: Recipient email address
  • from: Sender
  • subject: Email subject
  • content (for plain text content) or contenthtml (for HTML content): Email content (e.g., =A4, for sending the content of cell A4)

Add Row to Google Sheets Document

Add this action to create a button that adds data as a new row to a Google Sheets document.

Options
  • type: addrow
  • id: The ID (or URL) of the Google Sheets document
  • sheet (optional): The name of the sheet in which to add a row

Additionally, add rows with column number and content, e.g.,

  • 1: Content to add in column 1
  • 2: Content to add in column 2
  • 3: Content to add in column 3

Also, make sure you have shared the document with molnify-librarian@rapidcomputeengine.iam.gserviceaccount.com to ensure Molnify has write access.

For numbers to be correctly treated by Google Sheets, set the locale of your Google Sheets document to United States (File -> Spreadsheet settings... -> Locale: United States).

Add Row to Database

Use this action to store data in a database. Read more about enabling database connections for your app.

Options
  • type: insertRow

Additionally, add cells with column names prefixed with "." and the contents you want to add, e.g.,

  • tableName: The name of the database table
  • .first_column: Some contents
  • .second_column: Some more contents
  • .some_other_column: Even more contents

To update a database record, prefix your primary key column with a "k". If any matching record is found it will be updated.

  • k.primary_key_column: Some contents

If this action is present in an app, superusers are able to export all stored data as a spreadsheet alongside with the email and IP address of the user who entered the data, including a timestamp of when the data was saved. Additionally, it is possible to fetch this data via a REST API.

Add Record to Database

Use this action to store data in a database.

The variables associated with your inputs specify in which database columns the data is stored. To enable the Add Record action, you need to add the actual action and specify the database table name in your metadata, as outlined below. You also need to enable database connections for your app.

recordId is the unique id of each record in the database table. You may load a specific record by passing the recordId in the URL. E.g., app.molnify.com/app/myApp?recordId=24 to load the record with recordId 24.

Options
  • type: addRecord
Metadata
  • RecordTableName: data_my_database_table

Download Database Table

Implement this action to enable users to download a database table.

Options
  • type: downloadTable
  • tableName: name of the table to download

Save a Scenario

This action saves a scenario. If a scenario with the same name already exists, it will be overwritten.

For general information on scenarios, refer to the Save Scenario section.

Options
  • type: scenarioSave
  • newName: The name of the new scenario
  • oldName (optional): Specify an existing scenario name to have that deleted as part of saving - perfect for combining saving and renaming. Renaming a scenario using oldName is only valid for scenarios owned by the current user. To rename a scenario owned by someone else, use overwriteCurrentScenario, which will rename the scenario if newName doesn't match the name of the currently loaded scenario.
  • private (optional): Save the scenario as private (default is true)
Overwrite Options
These options apply to scenarios which are shared between users.
  • allowOverwrite (optional): Enable the scenario to be overwritten by other users (default is false)
  • overwriteCurrentScenario (optional): Try to overwrite the currently loaded scenario (default is false). If the currently loaded scenario isn't enabled for overwrite by other users, the scenario will be saved under the current user.

Generate a File

This action enables you to generate files from within your app. The generated files may either be PDF or Excel files and are generated and downloaded when the action is executed. Implementing this action requires:

Output File Template

In the template, you design what the generated file will look like.

  1. First, create a template in either Excel or Google Sheets of how the generated PDF or Excel file should look. This template file may contain images, colors, and any styling you may want. It can also include functions.
  2. Define which cells should receive data from your app:
    • Named ranges: For each cell you want to populate with a value from your app, add a named range. Let's say that cell A1 in your template reads Price: and cell B1 is intended to display a price generated from the app. Define, e.g., Template1 as the named range for cell B1. Repeat this step for all cells you want to populate.
    • Tables: Create tables with a matching number of columns as there are in the source tables in the app's Excel file. Make sure to name the tables (for instance Table1, etc.).
  3. Ensure that all the named ranges and tables are placed in the first sheet of the template file. If you prefer, you can hide this sheet and reference the cells from other sheets in your workbook.

If you created your template in Excel, follow these steps:

  1. Save the file and name it like this: Template_MyFileName.xlsx (MyFileName can be set to whatever you like).
  2. Once the template is ready, email it to info@molnify.com and it will be made available.

If you created your template in Google Sheets, follow these steps:

  1. Ensure that the spreadsheet is either publicly available for reading or shared with molnify-librarian@rapidcomputeengine.iam.gserviceaccount.com.
  2. Copy the URL of the spreadsheet.
Define Source Cells

Define the cells or tables that make out the source for the file to be generated. Depending on whether you have set up named ranges or tables in the template, do the following:

  • Named ranges: All source cells should have named ranges applied to them that match the named ranges in the template file.
  • Tables: All source tables need to have the same number of columns as the receiving tables in the template file. The tables should be named to match the names of the tables in the template file.
Generate File Action

Add the actual action to your app by specifying the following options:

  • type: generateFile
  • format: pdf or xlsx (default is pdf)
  • fileName: Name of the output file (default is application ID-molnify.pdf)
  • template (optional): Filename of the Excel template (e.g., template1.xlsx) or the URL of the Google Sheets spreadsheet to be used

Generate a PDF Report

This action creates a PDF report based on a Mustache template.

  1. Create a Mustache HTML template, where the main page is called index.html.
  2. Provide the HTML template, and all associated files (e.g., CSS, images, etc.) to Molnify.
Reference your app's inputs and outputs

Assign variables to your inputs and outputs, and use them as references in your template. E.g., add variable=myInput to the UI cell of an input in your app, and reference it in your Mustache template using {{inputs.myInput}}.

If you have a group of inputs that is repeated multiple times, place them in a table and name the table. Use this name as a reference in your Mustache template.

Elements in your app are grouped like this:

  • Inputs - referenced by inputs.variableName
  • Outputs - referenced by outputs.variableName
  • Charts - referenced by charts.variableName
  • Named ranges - referenced by namedRanges.name

To view all the data your app provides when running the action, open the Sidebar, and click Debug. Select your Generate Report action from the dropdown menu in the Action section, and click Run Action.

Charts

To include charts in your generated PDF, reference them using charts.variableName. This provides the full SVG of the chart. Remember to surround the variable name in your Mustache template with three curly brackets to render the HTML, i.e, {{{charts.myBarChart}}}.

File Upload

A File Upload input can contain multiple files, which are represented as a value of comma-separated URLs.

If there is only one file, you can simply reference it as {{myFileUpload}}, to retrieve the file URL.

To iterate over multiple files in a File Upload input, use the {{myFileUpload_array}} property, which provides an array of URLs, e.g., ["https://.../image1.jpg","https://.../image2.jpg"].

Signature

To include a signature in your PDF report, follow this guide and use the hidden SVG input in your template. Remember to surround the variable name in your Mustache template with three curly brackets to render the HTML, i.e, {{{inputs.mySignature}}}.

Example:

This simple example demonstrates a Mustache HTML template with:

  • A title
  • An iteration over all inputs in the table named Products (shown in the image above)
  • An image from a File Upload input

<html> <body> <h1>{{inputs.title}}</h1> {{#namedRanges.Products}} <p>Quantity: {{Quantity}} {{#Price}}at price: {{Price}}{{/Price}}</p> {{/namedRanges.Products}} <img src="{{inputs.anImage}}" height="400" width="auto" /> </body> </html>

Options
  • type: generateReport
  • fileName: Name of the output file
  • template: Name of the template to be used

Send an HTTP Request

This action sends an HTTP request.

Options
  • type: http
  • url: the URL you want to send the request to
  • method (optional): GET or POST (default is POST)
  • payload (optional): What value to send, e.g., the JSON data (default is OK)
  • autopayload (optional): inputs OR outputs OR all (this overrides payload, and automatically creates a JSON Object with the inputs, outputs or both inputs and outputs)

If authorization is required, also specify these:

  • token (optional): Token to send in header "Authorization"
  • authorizationType (optional): If you specify this, the header “Authorization” will be sent with the value: authorizationType + “ “ + token. The default value for this is “Bearer” (if token is set).

Multiple Actions

To have Molnify perform several actions, specify name (read more) for each action you want to perform. Then add a separate action with type set to multiple. Then refer to each other action on separate rows.

In some instances you may wish to excelude certain actions from being performed. Please, refer to the skip feature.

Options
  • type: multiple
  • 1: The name of the first action to perform
  • 2: The name of the second action to perform, etc.

Triggered JavaScript Actions

JavaScriptAfterLoad and JavaScriptAfterCalc

You can add triggered JavaScript actions to be run at certain points. These are defined as part of your metadata. Current triggers supported are:

  • JavaScriptAfterLoad: JavaScript code to be run after loading the app
  • JavaScriptAfterCalc: JavaScript code to be run after a successful calculation. This function is passed the results from the calculation. Simply access results; e.g. console.log(results);.

Here is an example of a JavaScript run after a calculation. It will replace the content of an input (referenced as variable myTextInput) with the content of an output box (referenced as variable myOutput). JavaScriptAfterCalc: setValueForVariable("myTextInput", getValueForVariable("myOutput")).

And here is another example of a JavaScript after a calculation: JavaScriptAfterCalc: if (getValueForVariable("myOutput") == 20) setValueForVariable("myInput", "0"). It would update a text input (referenced as variable myInput) with 0 if the output box (referenced as variable myOutput) equals 20.

JSOnChange

A special kind of triggered JavaScript action is jsOnChange, which can be added to the UI cell of any input or output. The provided code will be executed when the input or output is changed. E.g., jsOnChange=myFunction. myFunction will be passed a reference to the actual input element that triggered it. If your JavaScript code is only one, single statement, you may enter it directly.

The following example would check the character length of an input with variable set to charlimit. If the length exceeds 6 characters, all characters after the sixth character are removed: variable=charlimit;jsOnChange=if (getValueForVariable("charlimit").length > 6) setValueForVariable("charlimit", getValueForVariable("charlimit").substring(0,6));

If you have more than a single statement to run when an input or output changes, define a custom function in the MetaData property JavaScript and call it from JSOnChange.

Action Handler (JavaScript)

If your app uses cutsom JavaScript code, you may specificy a custom action handler file and action handler button title. The action handler JavaScript file needs to implement two functions; actionHandler(dictionary) and customInit(dictionary). Add the following metadata values:

  • ActionHandler: The path of the JavaScript file, e.g. myCustomHandler/handler.js
  • ActionTitle: The title of the button which executes the custom action handler

Database Connection

You can connect your Molnify application to an SQL database. Contact us to have your database set up.

Once your database is enabled, you can:

Database Lookup

Molnify can perform SQL database lookups. The results can be used by your Excel functions.

To enable database lookups, you first have to add a macro to your Excel file. This also enables you to do database lookups on mock data. So, as you develop your app, you can perform lookups in a sheet locally. Once the app is online, the lookups will be done in your real database. This enables for quick testing in Excel while you're building your app.

Add the Database Lookup Macro
  • Option 1
    1. Download the macro-enabled workbook, dblookup.xlsm, which includes a simple example of a database lookup.
    2. Open the file, enabling macros.
    3. Modify the file as you like, and upload it as your app.
  • Option 2
    1. Download the actual macro code as a text file, dblookup.txt.
    2. Open the downloaded text file and copy the content.
    3. Create a new or open an existing Excel file.
    4. Open the Visual Basic Editor in Excel. The quickest way is using a keyboard shortcut:
      • Windows: Alt + F11
      • Mac: Fn + Option + F11
    5. Paste the copied content.
    6. Save and close the Visual Basic Editor.
Use the Database Lookup Macro

After adding the database lookup macro, you can use the database lookup function like this:

=DBLOOKUP(id, id column name, table name, column name), where

  • id is the value to look for
  • id column name is the column in which to look for id
  • table name is the name of the database table (and the mock data sheet in your Excel file)
  • column name is the column containing the value to be returned

Autofill

Use the metadata option autofill.named_range to populate your app with data from a database table, where named_range is the named range you want to populate with the returned data. Enter your SQL query in the metadata cell to the right. You may then run VLOOKUP, or any other Excel function, on the returned data.

Name the range that makes out the table contents (i.e., B2:C3 in this case). Use this reference in your autofill to have the table contents replaced by the data returned from the database table.

This metadata would run the SQL query (="SELECT * from data_myTable") and populate the named range (data) with the results.

You may set up different autofills for different named ranges. For instance, you may have an output box named count and have an autofill set up like this: autofill.count: ="select count(*) from data_myTable" to have the output box show the current number of rows in your database table.

Custom SQL

You may run custom, read-only SQL queries in your database table by using the Molnify function CUSTOMSQL().

Example: CUSTOMSQL("SELECT COUNT(*) FROM mytable WHERE store = 'Stockholm'").

Advanced

This section covers some slightly more advanced functionality.

Conditional Show

Try It Download

You may show inputs and outputs based on the value of another input or output by using the following syntax in the UI string: showIfCell=cell_address;showIfValue=value_to_match. You may also use showIfValueNot to show an input when the value is not matched.

ABC
1 Name showIfCell=Sheet1!B3;showIfValue=A

Copy for Excel Copy for Sheets

This would create an input with the title Name. Because of the UI string, showIfCell=Sheet1!B3;showIfValue=A, the input would only be visible when an input or ouput in cell Sheet1!B3 is TRUE.

For more complex conditions, you may use an output box to render, e.g., show or hide. This cell can then be referenced, e.g., showIfCell=Sheet1!B3;showIfValue=show, where Sheet1B3 is the hidden output box. Read more about hidden inputs and outputs.

Note that true/false should be entered in English when used in the UI string.

In some cases you may wish to reset an input to its default value upon hiding. Read more in the section covering Reset When Hidden.

Click here for a video tutorial on conditional show.

CSS Classes

You may add custom CSS classes to all inputs, outputs, charts and actions.

In some cases, you may need to use the class selector in combination with another one to reach the actual element that you want to affect. This applies to, e.g., toggles. For complex outputs that are contained in a panel, e.g., a chart, the class is applied to the whole panel body.

Specify your custom styles in the metadata property CSS.

UI string: class=myClass, where myClass is your custom CSS class. Note that there should not be any ' or " characters.

Hidden

An input or output may be set to be permanently hidden by specifying hidden as the UI string. It will still be passed along and updated at calculations. A hidden output box can be useful for creating complex conditions for Conditional Show.

ABC
1 Positive? =IF(B3>0;"show";"hide") hidden

Copy for Excel Copy for Sheets

This would create an output with the title Positive?. Because of the UI string, hidden, it would always be hidden.

Solver

Solver is a custom Molnify function for goal seeking. Note that this function is not available in Excel and will hence report an error in Excel, but work when you upload your application to Molnify.

Syntax: =SOLVER(f; v; x) where f is the reference as a string to the cell that contains the goal function (the dependent variable), v is the goal value that you want the goal function to get and x is the reference as a string to the cell that contains the independent variable to vary

Example: =SOLVER(“Sheet1!H4”; 0; “Sheet1!B4"). This will return the value of B4 (the cell to vary) that will make H4 (the goal function) result in the value 0 (the value to goal seek for). Let's say H4 has the following function: =B3*7-B4*3+B5 and B3 and B5 are inputs set to 5 and 1. Running SOLVER as defined in this example would result in 12, since 0 = 5*7 - B4*3 + 1 => B4*3 = 36 => B4 is 12.

Advanced syntax: =SOLVER(f; v; x; z; zv; step; tolerance) where f, v and x are defined as above, and z is the reference as a string to an additional cell to which you can chance the value for to zv before optimization. step is an optional manual step to use instead of the automatic step and tolerance is the tolerance as an absolute measure of deviation from v

This advanced syntax allows you to handle more complex optimization scenarios, as well as set manual step (as a fall back from an automatically calculated step size) and tolerance. Example: =SOLVER(“Sheet1!H4”; 0; “Sheet1!B4"; “Sheet1!B6"; 12; 3; 2) will just as above solve the same function but now move in steps of 3 until the goal function is between -2 and +2 (tolerance of 2). Additionally, it will set Sheet1B6 to the value 12 before starting the optimization. Manual step may be used when the goal function e.g., is not differentiable or well behaved.

For when the solver does not converge, you may try another implementation based on the bisection method called SOLVERBI. Although it converges more slowly you might find it gives better results for your case. Similar to SOLVER, its syntax is =SOLVERBI(f; v; x; z; zv; lowerBound; upperBound) with two optional parameters for bounding the function.

XML Service

To retrieve data from a URL, simply add the Molnify function XMLService. This function is available in some versions of Excel, but not all. If it is not available in your version of Excel, then you will not receive data/results in Excel, despite it will work when you have uploaded the application to Molnify.

Syntax: =XMLService(url) where url is the URL of the XML data.

XML Parsing

The Molnify function filterXML lets you filter out data from an XML string using the standard query format XMLPath. Note: this function is not available in Excel and will hence report an error in Excel, but work when you upload your application to Molnify.

Syntax: =filterXML(xmlString; xmlPath), where

  • xmlString is the XML string to filter
  • xmlPath is the XML filter

Refer to https://www.w3schools.com/xml/xpath_syntax.asp for details on XML paths.

Example: =FILTERXML(B5;"firstName"), where B5 contains <firstName>John</firstName> would give you John.

JSON Parsing

The Molnify function filterJSON lets you filter out data from a JSON string using a query format named JSONPath. Note: this function is not available in Excel and will hence report an error in Excel, but work when you upload your application to Molnify.

Syntax: =FILTERJSON(jsonString; jsonPath), where

  • jsonString is the JSON string to filter
  • jsonPath is the JSON filter

Refer to https://jsonpath.com/ and https://goessner.net/articles/JsonPath/ for details on JSON paths.

Example: =filterJSON(B5;"firstName"), where B5 contains {"firstName": "John"} would give you John.

Variable

Assign a variable name to an input or output. This is done by adding variable=myVariable to the UI string, where myVariable is the variable name.

Variables can be used for initializing inputs from URL parameters upon load.

Variables are also a convenient way of referencing to specific elements without relying on them maintaining the same cell reference. E.g., use the following jQuery snippet to reference an element with variable set to lastName: $("[variable='lastName']").

Finally, the variable names can be referenced when integrating your app with other services and APIs.

Metadata

Metadata refers to general information about your app, such as name and author. Metadata also contains data on what users are allowed access. Finally, metadata may also contain styling properties. The cells need to be colored purple.

General Metadata

General metadata covers information such as the name, author, version, etc. Enter the options in purple cells.

Options
  • Name: App name
  • Author: Author
  • Website: Website URL (your logo would link here)
  • Version: Version
  • ID: App ID. Used to identify the app. It is reflected in the app's URL. E.g., app.molnify.com/app/my_id.
    • If you upload an Excel file with the same ID as an existing app, that app will get updated.
  • Description: A text description of your app
  • Reference: In-depth description and/or reference
  • Triggered JavaScript Actions: Please refer to the section Triggered JavaScript Actions

This set of metadata would create an app with the ID myApp, the name My App and set the author to John Doe. Its ID is reflected in the URL of the app. In this case it would be app.molnify.com/app/myApp.

Special Features and Settings

Molnify offers settings for enabling and disabling general functionality.

Options
  • AutoCalcEnabled: Enable app for automatic calculations (TRUE or FALSE)
  • CookieConsentPopUp: Molnify stores some cookies (please refer to the Cookie Policy). If you wish to collect cookie consent when users visit your app, set this metadata option to TRUE. Default is FALSE.
    • To trigger the cookie consent pop-up at any time, simply link to your app’s URL + ?cookieconsent=popup. E.g., app.molnify.com/app/myApp?cookieconsent=popup.
    • You may specify a custom cookie consent alert text by adding the following to your metadata: JavaScriptAfterLoad: $("#cookie-consent-modal > .modal-dialog > .modal-content > .modal-body").text("My custom cookie consent text.").
  • EnabledForCalculate: Specify this as FALSE to hide the calculate button for you app; combine with AutoCalcEnabled FALSE to completely disable calculations
  • EnabledForPrint: Specify this as FALSE to hide the print button for you app
  • EnabledForReset: Specify this as TRUE to enable a reset button for you app
  • EnabledForUpdate: Enables users to trigger an update of the app (TRUE or FALSE)
  • EnabledForLogOut: Shows a sign out button, if the user is logged in. Specify EnabledForLogOut to TRUE. Default is FALSE.
    • CustomLogOutURL: Specify a URL, where the user will be redirected at sign out. E.g., CustomLogOutURL: https://www.molnify.com.
  • EnabledForSameSiteNoneAccessToken: Set this to TRUE to enable an app, that requires sign-in, to be accessed using a SameSite None cookie. This is required for an app to be accessible in an iframe. Default is FALSE.
  • ClearClipboardAtReset: Specify this as TRUE to clear the clipboard at each reset
  • ClearClipboardAtCalc: Specify this as TRUE to clear the clipboard each time the calculate button is clicked
  • Only include certain sheets in your app:
    • MolnifyIgnore: Enter MolnifyIgnore in cell A1 of a sheet that you don't want to include in your app. Make sure to also specify ParseAllSheets: TRUE.
    • OnlyIncludeSheet: Names of the Excel sheets to be included (comma-separated)
    • ParseAllSheets: Set to TRUE to tell Molnify to look for inputs and outputs in all sheets
  • JavaScript: Use this to add custom JavaScript code. Functions defined in this cell may be called from other places in your app, e.g., from JSOnChange.
    • Example: JavaScript: function myFunction() { alert("Hello world!"); console.log("Alert triggered"); }.

Save Scenario

Let your users save the current state of the app (inputs and outputs) as a scenario by adding the option EnabledForSave TRUE to your metadata. If you prefer, you can add a Save Scenario action instead of using the standard save button.

Options

The following options can be added to your metadata regarding scenarios:

  • Add an input with the UI string variable=molnifyCurrentScenario; to have that input contain the currently selected scenario. Useful, e.g., when implementing an action, which renames the currently selected scenario.
  • Similarly, an input with the UI string variable=molnifyCurrentScenarioLink; will contain a link to the currently selected scenario. Useful, e.g., when you want to save a scenario and create an e-mail with a link which references that scenario.
  • Set ScenarioNameVariable to the name of a named range or variable which contains your desired default name when saving a scenario.
  • Set ScenarioSavePrivate to TRUE if you want scenarios to be saved privately by default.
  • Add ScenarioSharedUsersCell and specify a cell, e.g., Sheet1!B10 to share the scenario with a specific user. Ensure that the referenced cell is an input. Populate the cell with the email of another user that you wish to share the scenario with. The scenario will then show up in the scenarios list for that user. If you wish to share a scenario with several other users, you can either use a wildcard (e.g., *@mydomain.com) or separate multiple email addresses with commas.
  • ScenarioTerm: By default, a saved app state is called a Scenario. To use a custom term, e.g., Order, specify ScenarioTerm Order.

Token Authentication

An app can be enabled for token-based authentication by specifying the metadata TokenAuthentication. Note that the values for this metadata property is a semicolon-separated string of settings. E.g., TokenAuthentication: algorithm=myAlgorithm;salt=mySalt, where myAlgorithm and mySalt have been configured by Molnify.

Options
  • algorithm: Algorithm name.
  • salt: Salt.
  • email (optional): URL parameter name to use instead of 'email'.
  • token (optional): URL parameter name to use instead of 'token'.

Users

Molnify allows for refined user handling based on email addresses or Swedish personal identity numbers. Enter the options like any other metadata, i.e., in purple cells. To retrieve the current user, add a dedicated input.

Options
  • Users: A comma-separated list of email addresses that are allowed to access the application. Defining all users on a domain is also supported by specifying, e.g., *@mycompany.com. Contact us if you need to set up whitelisting for specific IPs/networks. To grant all users access, specify *@*.
  • Managers: A comma-separated list of users that are allowed to view all scenarios and download data added using the Insert Row to Database action.
  • SuperUsers: A comma-separated list of users that are allowed to more extended access the application, such as updating it. They also have the same permissions as Managers.
  • BankID: Enter Swedish personal identity number, i.e., YYYYMMDDNNNN, as Users, Managers or SuperUsers to enable sign in with BankID.

Instead of a comma-separated list of Users or SuperUsers, you may specify a range where the users are listed in rows.

Example: If your list of regular users is located in the sheet MyUsers (column A; rows 2 to 100), you may specify Users: MyUsers!A2:A100. This also applies to SuperUsers and Managers.

Styling

Try It Download

Set the colors of your headers, buttons, etc. by using the metadata options below. For instance, enter HeaderColor in cell A1 and specify the desired color for the app header in cell B1, e.g. #ff0000 for red. Remember to color all metadata cells purple.

Options
  • Top Banner
    • TopBannerColor: Top banner color
    • TopBannerHidden: Set this to TRUE to hide the top-most banner
  • Header
    • HeaderFont: Header text font, e.g., Arial
    • HeaderHidden: Set this to TRUE to hide the header
    • HeaderTextColor: Header text color
    • PanelHeaderColor: Panel header color
  • Body
    • BackgroundImageURL: The URL of your desired background image
    • BodyFont: Body text font, e.g., Arial
  • Buttons
    • ButtonColor: Button color
    • ButtonActiveColor: Color of a selected/active button
    • SuccessButtonColor: Button color for success buttons
    • ToggleActiveColor: Color of a toggle turned to on
    • ExpandButtonColor: Color for expand buttons
    • CollapseButtonColor: Color for collapse buttons
    • CalculateTitle: Title of calculate button
    • CopyTitle: Title of copy button
    • CustomInfoTooltip: Custom tooltip for info button
    • CustomReferenceTooltip: Custom tooltip for reference button
    • CustomUpdateTooltip: Custom tooltip for update button
    • CustomSaveTooltip: Custom tooltip for save scenario button
    • CustomPrintTooltip: Custom tooltip for print button
    • CustomResetTooltip: Custom tooltip for reset button
    • CustomLogoutTooltip: Custom tooltip for log out button
    • CustomDeleteTooltip: Custom tooltip for delete scenario button
    • CustomDownloadDataTooltip: Custom tooltip for download data button
  • Slider
    • SliderMinAndMaxBackgroundColor: Background color for the min and max values of a slider
    • SliderMinAndMaxTextColor: Text color for the min and max values of a slider
    • SliderCurrentValueBackgroundColor: Background color for the current value of a slider
    • SliderCurrentValueTextColor: Text color for the current value of a slider
  • Panels
    • PanelsFixed: Set this to TRUE to make all panels fixed in position meaning they can't be rearranged
  • Input Panel
    • InputPanelTitle: Title of input panel
    • InputPanelSmall: Will make the input panel narrower
    • InputPanelFixed: Will make the input panel fixed to the left
  • Output Panel
    • OutputPanelTitle: Title of output panel
    • OutputBoxBackgroundColor: Background color of an output box
  • Icons
    • LogoURL: URL of custom logotype image. Alternatively, you can include a logotype image directly in your Excel file.
    • AppleTouchIconURL: URL of icon for iOS devices

You may also specify a completely custom CSS by using CSS. For instance, enter CSS in cell A1 and your CSS string in cell B1, e.g. text { font: 12px sans-serif; }. If you're using a CSS template, use the keyword AdditionalCSS to append CSS styles to the template your're using. You can add custom CSS classes to all elements using the UI string class.