Introduction

This is the complete Molnify Reference Guide. It covers:

• Creating an application from Excel and Google Sheets spreadsheets
• An overview of general Molnify concepts
• Inputs, which include text fields, sliders, dropdown menus and more
• Outputs, such as output boxes, HTML panels and more
• Charts, including bar charts, pie charts, line charts and more
• Tables
• Actions, which are triggered events, and include sending emails and adding data to Google Sheets spreadsheets
• General app settings and graphical profiling

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.

• Green: Inputs
• Red: Outputs
• Light blue: Charts and Tables
• Yellow: Actions
• Purple: Metadata

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

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.

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

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.

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.

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.

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

Dropdown

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.

UI string: dropdown.

Multiple Selections

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.

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.

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.

UI string: infoText or longInfoText.

Records Table

A records table lets you access database records saved in another app. Read more.

UI string: recordsTable. Also specify appId=YOUR_APP and columns=Var1,Var2, where YOUR_APP is the ID of the app which has the records you wish to access, and Var1 and Var2 are the variables you wish to list.

Signature

Try It Download

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

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.

UI string: signature;jsOnChange=copySVGToTextInput.

Slider

Try It Download

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

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.

To identify which tab is currently selected, add an input and set its UI string to variable=molnifyCurrentTab. It will be populated with the tab's title.

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

Text Field

Try It Download

This is the default input type.

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.

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.

No Title

To have an input (or output among inputs) shown full width, without any title next to it, simply add noTitle to the UI string.

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

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

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.

UI string: html. If you wish to hide the copy button, simply specify hideCopy in the UI string. You may place the HTML panel among inputs by simply placing it accordingly in your Excel file, and add the UI string amongInputs. You may then also make the output full width by specifying noTitle (refer to this section).

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.

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.

UI string: barChart.

Pie Chart

Try It Download

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

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.

UI string: lineChart or lineBarChart.

Scatter Chart

To create a scatter chart, you need an area with at least three columns - series, x and y. Optionally, you can also specify size and shape.

Available shapes:

• circle
• diamond
• triangle-up
• triangle-down
• cross
• square

UI string: scatterChart.

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.

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.

For scatter charts, define a comma-separated string of values. I.e., atLeast=xMin,xMax,yMin,yMax, where each position corresponds to a value that should always be covered by 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. This will set them globally for all charts.

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

Alternatively: To set the color of a chart series for a particular chart, type series0.color=red; or equivalently series0.color=#FF0000; in the UI string, where 0 is the number of the series (in this case the first one since the series are zero-indexed).

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.

Series Options

There are these following properties which you can set individually for a series:

• Color: Available for all charts. For example, to get the color red, type series0.color=red; or equivalently series0.color=#FF0000; in the UI string. Indices for series start at 0.
• Area below line: Available for line charts. To fill the area below a line, type series0.showArea; in the UI string, where 0 is the number of the series.
• Line width: Available for line charts. Type series0.strokeWidth=4; in the UI string to set the line width to 4.
• Dashed line: Available for line charts. Type series0.dashedLine; in the UI string to get a dashed line.

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.

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.

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.

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.

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.

You can access the records from another app by using a records table.

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

Download custom data

Implement this action to enable users to download CSV or JSON data, based on a custom query.

Options

• type: downloadQuery
• query: the (SQL) query used to retrieve the data
• format (optional): csv (default) or json
• delimeter (optional): the separator used for data, only applicable for csv. Default is ';'

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:

• An output file template for the file to be generated,
• Defining the source cells in your app's spreadsheet, and
• Setting up the actual action.

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)
• landscape: true or false (default is false). Only applicable when format 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
• overwriteFormatting (optional): Overwrites the format from the template. Default is TRUE.
• protectWorkbook (optional): The generated Excel workbook will be protected from changes. Default is FALSE.
• workbookPassword (optional): A password for disabling the workbook protection. If not supplied, anyone can unprotect the workbook.

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

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>

General options

• type: generateReport
• fileName: Name of the output file
• template: Name of the template to be used
• suppressDownload (optional): Disable download of the report, which may be preferable when emailing the report
• pageSize: A0, A1, A2, A3, A4, A5, A6, Letter (default), Legal, Tabloid, Ledger
• landscape: True or false (default) if the page size should be in landscape mode
• cssPageSize: Try to pick up sizes from CSS instead of here in the action

Email Options

To have the URL to the report emailed, simply add the corresponding email options, such as to, from, etc. Do not include type email. Also note:

• content or contenthtml: The email content. Enter {{urlToReport}} where you want to insert the actual report URL.

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:

• Perform database lookups using the Database Lookup macro
• Insert rows into your database table using the Insert Row action
• Use Autofill to populate your app with data from a database table
• Save inputs to your database, and restore them, using the Add Record action

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.

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.

Note that instead of specifying showIfCell, you may use showIfVariable=myNamedRange to refer to a named range or a variable.

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.

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.

One additional method called SOLVERSTEP is a step based approach in which the solver takes a fixed step for x up to maximum number of steps until a boolean function q evaluates to TRUE and the optimization will exit and return the (current) value for x. The syntax for this is =SOLVERSTEP(q; TRUE; x; z; zv; stepSize; maxSteps, startingX), in which stepSize is the change of x in each iteration, maxSteps is the maximum number of steps (up to 200), and finally startingX is the value of x from which the optimization should start from. Note that q,x and z are string references to cells - e.g., "Sheet!A1". Only q and x are required, the remaining parameters can be left out and then assumes default values.

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. This can also be done by simply defining a named range for the cell. The named range then becomes 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

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
• EnabledForDynamicTitles: Set this to FALSE to disable dynamic titles for the inputs and outputs in you app
• 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.

Single Sign On (SSO)

Molnify supports multiple types of sign-on: email/password, Google based, Swedish BankID biometric login, Azure AD, TokenAuthentication (described below) and SAML-based logins. Contact us to enable SSO for your domain(s)

Token Authentication

The purpose of TokenAuthentication is so that you as a client of Molnify can easily log in your customer to Molnify applications, without having to go through the process of having your users creating accounts on Molnify or alternatively integrate with your SSO solutions (e.g., Google Domains or Microsoft Active Directory). 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.

When signing in to an app using token authentication, the URL is: https://app.molnify.com/tokenauthentication/MY_APP_ID?email=name%40domain.com&token=MY_TOKEN.

Contact us to enable this for free for your domain(s) and send you an implementation guide

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.

Realms

Sometimes your application is used by multiple of your own customers and you want to split access between certain types of data between the customers. Realms works by adding Realms and specifying which realms you want to use e.g., Alpha,Beta,Gamma. Records and Scenarios can then optionally be accessed and used only within a certain realm. You can have an input populated with the currently selected realm by setting its UI string to currentRealm. The input will not be shown in the app, but its value is accessible by simply referencing the cell in your spreadsheet.

Contact us to explore this advanced feature

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
• Charts
  • ChartDownloadBackgroundColor: Background color for charts when downloading them as a PNG file. Default is transparent.

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.