How to Build an App with Molnify

From a blank Excel sheet to a finished app

This guide will describe how you go from Excel to app, and you will learn how Molnify reads your Excel file as an instruction for how Molnify should create your app. Important things such as how you can structure your Excel model, which colors to use for inputs and outputs, and in what way Molnify reads the Excel file will be described. This is a simple guide, created to give you an understanding of how you build Molnify apps and to provide you with the basic knowledge so that you can build your own apps quickly and easily.

Below you can see the app that we are going to create. The app itself has no real use case and the purpose is to show you the ropes when it comes to Molnify app development and what you can do with Molnify with little bit of imagination. You can try out the app by clicking this link: https://app.molnify.com/app/mynewapp.

To begin with, how does Molnify read the Excel file? Well, from left to right, from top to bottom.

In this guide, we will talk about inputs (green cells), outputs (red cells), charts and tables (blue cells), actions (yellow cells), and metadata (purple cells).

It is important that you only use the standard colors of Excel or Google Sheets. For inputs, it is green, not light green or dark green, that applies.

To build an input, it requires three consecutive cells in your Excel file: a title cell, a value cell (green cell), and a UI cell. You do not need to write anything in the UI cell, but it needs its place. In the example below, for instance, you would not be able to have a new title cell in column E, which is Input 1's UI cell.

Now let's add another input. We can add this on the same row, in columns F, G, and H, or we can put it on the next row. Since Molnify reads the file from left to right, top to bottom, both options would result in this becoming the next inputs. Now we will also add slider in the UI cell, which will make input 2 a slider when the file is uploaded and used as an app.

We are now going to add a button. TRUE and FALSE become clickable buttons in Molnify. We will make this the third input, so for simplicity's sake, we will just place it on the next row.

Now we also want to create a simple text box, where the app user can write their email. To separate this part in the app, we will use the UI cell command dividername=Information,” to create a divider line, and a slightly larger text that reads “Information.”

Under this input, we want to have a slightly larger text box where a user of the app can write a bit longer text. We use the UI cell command textarea.

We will now add a list of products in our app. We do this by listing product 1 to 20 and in the next column we add various prices. To have a list in the app, we convert the cells where it says product 1 to 20 into a named range and name it products:

We then create the input by coming up with a title, and in the value cell go to Data and Data Validation and then choose “List” and enter =products. Note that you must use a named range for this, it does not work to have cell references or formulas here.

We then color the value cell green, write dropdown in the UI cell, and we also add a dividername=Products. To separate the two UI commands dropdown and dividername=, we use a semicolon ;. You can write many different UI cell commands in the same UI cell and you always separate them by putting a semicolon between them.

Now we imagine that as soon as someone has chosen a product in the list, we want a new input, with a new list to be shown. This next input should thus be hidden as long as a choice has not been made in list number 1. We can hide or show inputs (and outputs) by using conditional show. For the conditional show to know which input to look at, we give the first list a name by writing in its UI cell: ;variable=list1 We then simply copy the title and value cell from row 11 and paste into row 12. We add dropdown and the conditional show command: showifvariable=list1 so Molnify knows what to monitor and then, after a semicolon, showifvaluenot= (i.e., show if the value in the variable list one is not nothing).

Now we will build three output boxes. One that shows Input 1 * Input 2, one that shows the price of Product 1, and one that shows the price of Product 2.

To build the first output, we need: Title cell, value cell (red) and UI cell, just like with inputs. We write Total as the title, create a simple Excel formula =D4*D5 in the next cell which we color red and in the UI cell we write icon=fa-money (Molnify uses the Font Awesome 4.7 library for icons).

The next output becomes a bit more advanced and here we will create a =VLOOKUP function that searches our product list for the price of the product selected in the first list. Since initially there will be no choice made in the list, this formula will return N/A and we do not want to see that. Therefore, we create a =IFERROR function around the =VLOOKUP so that as long as no result exists, two dashes are displayed. The formula therefore looks like this: =IFERROR(VLOOKUP(D11;L2:M21;2;0);"--")

We give the output a title, Product 1, and then color the cell with our formula in red. This time we skip the UI cell.

For the output Product 2, we simply repeat what we did to create the previous output:

Now we will create a table. Tables are blue cells and, like inputs and outputs, have a title cell and a UI cell. Your table also has column titles. A table can contain several value cells in a row, as well as several rows. If all cells in a row have the value “” i.e., two quotation marks, that row will be hidden. This is useful if, for example, you want a table where more rows are shown only after more selections have been made in the app, and remain hidden until then. In our table, we will display the product name and the price of the product for product 1 on one row, and product 2 on the next row. We will name the table Specification. In the table's UI cell, we will write table. The table will have two rows, so we create a title cell, column titles, blue cells for the table's content, and a UI cell first. We will add the formulas later.

Now let's fix the formulas: An IF formula that looks at the green cell for product 1. If no choice is made, show “” and if a choice is made, display what is in the cell where the list is. We then simply drag the formula down to the row below.

In the two other columns, we want to display the price, but hide it if no choice is made. The formulas will thus be in cell H11: =IF(G11="";"";VLOOKUP(D11;$L$2:$M$21;2;0)) and for H12 we can just drag down the formula so it becomes: =IF(G12="";"";VLOOKUP(D12;$L$2:$M$21;2;0))

Now we will create a super simple email action, with yellow cells! We want an action that takes what is written in cell D9 (i.e., the comment) and sends this in an email to the email address entered in cell D8.

To create an email action, we write:

  • type and then in the next cell to the right (yellow cell) email
  • subject and then in the next cell to the right (yellow cell) An email from my Molnify app
  • from and then in the next cell to the right (yellow cell) A Molnify user (we could have used a cell reference, a name, or similar here)
  • to and then in the next cell to the right (yellow cell) =D8
  • contentHTML and then in the next cell to the right (yellow cell) =D9
  • title and then in the next cell to the right (yellow cell) Send email

We will now create another output - a pie chart. Charts, just like tables, are blue cells in Molnify. A chart can have several rows and columns, but a pie chart can only have several rows and one column. We make this chart in the simplest possible way. We set the title cell to Pie, as a column title we write a % sign, and in the UI cell, we write piechart. As titles for the rows that will have blue value cells, we make cell references to C4 and C5, so the titles become Input 1 and Input 2. In the top blue cell, we write the following formula: =D4/SUM($D$4:$D$5) then we drag the formula down to the next row and get the following: =D5/SUM($D$4:$D$5)

We reduce the decimals in both cells and we now have two cells that sum up to 1. Perfect for a pie chart!

Now it's time for metadata (purple cells). Metadata, unlike inputs and outputs as well as actions, require that all cells that are metadata are colored purple. In the metadata, we will set the id of the app, which also becomes the end of the app URL, and name, which becomes the name of the app. There are many more meta commands that, for example, style the app, set user restrictions on the app and even metadata where you can write SQL strings that operate on Molnify's SQL database. But, in this guide, we keep it simple and are satisfied with id and name.

So, in cells that we color purple, we write id and then in the next cell that is purple mynewapp. If you follow this guide and build your own app, change "mynewapp" to something else, since I have already uploaded an app with the id "mynewapp". If you upload a file with an id that is already taken, Molnify will make up an id for you, which you have not chosen. A difference will also be that if you make changes to your app and upload the file again with an id that is already taken, Molnify creates a copy, with a new invented id. On the other hand, if you have written an id that does not exist, you will 1, get to keep your own id and 2, when you update by uploading the file again, not create a new copy of the app, but simply replace your old app with your new one.

We also enter name followed by My new app in the next purple cell to the right.

We then go to app.molnify.com and click on Create app. We take our Excel file and drop it over the area that says Drop Excel file here or click to upload.

Now Molnify reads the Excel file as an instruction for how the app should be built and after a few seconds, the app is ready to be used. In our case, the URL becomes https://app.molnify.com/app/mynewapp but in your case, you have probably chosen another id, so the end of your URL will be something else. This is what the app looks like when it has become an app:

If you want to continue developing your app, you make changes to your Excel file, add inputs and outputs, save your Excel file on your computer (a good idea is to save the file with different names, so you can go back to a previous version if something goes wrong). When you want to upload a new version, you don't need to go back to app.molnify.com and click on Create app, but you can instead click out the sidebar in your app (it's just you who uploads that sees it, as well as any Managers or SuperUsers that you have defined in your metadata) and here you can drop new versions of your Excel model, so the app gets updated.

This was a simple guide to help you get started. There are many more functions in Molnify and if you want to read about them, you can do so in our Reference Guide. You can also check out our YouTube channel, where we have several video tutorials that show guides like this, but also more advanced tutorials for other functions.

You can download the Excel file that forms the basis for this app if you want to experiment or use it as a basis for your own app.

Enjoy building your app and if you have questions you can always email info@molnify.com or if you want personal guidance you can book a meeting with us.