Getting Started with HTML in Ninox Formula Fields

By Adam Davidson, Director of Product Management

This article outlines the basics of getting started with HTML in Ninox formula fields, and assumes no prior knowledge of HTML.  I will go through the html() function in Ninox as well as elements in HTML, and provide further resources to help you get the most out of inserting HTML into Ninox via formula fields.

THE HTML() FUNCTION

The html() function is a special function in Ninox that allows HTML to be rendered in a formula field. The html() function takes a single string parameter which is the HTML string to be inserted into the formula field. It often looks much better to set the background color of the formula field to the background color of the table view you are in (the default is white). The background color can be set under style > Background color when editing the formula field. Below is an example of how the HTML function is used:

							
					html("<div style='font-weight:bold; color:white; background-color: MediumSeaGreen; text-align: center;'>MY HTML ELEMENT</div>")

HTML BASICS

HTML stands for Hypertext Markup Language, and is the language that defines the structure of almost all webpages on the internet.  It is composed of elements which are rendered by browsers as visual elements in a webpage.  Here is an example of an HTML element:

An element is composed of a start tag (or opening tag), element content, and an end tag (or closing tag). 

START TAG

  • The start tag always starts and ends with “<” and “>” respectively.
  • The “p” in the example above is the tag name, and specifies the type of element to be rendered; in this case, “p” denotes a paragraph element. This determines the default visual appearance and functionality of an element. Some common tag names are “p” (paragraph), “a” (link), “button” (button), “input” (user text input), and “div” (most generic and ubiquitous element type). Here is a list of all element tag names separated by category.
  • The start tag contains an optional list of attributes.
    • The attribute name defines what attribute is being set. Some common attributes are height, width, style, class, onclick, and many more. Here is a list of all HTML attributes.
    • An “=” separates the attribute name from the attribute value (no space)
    • An attribute value is enclosed in either double quotes or single quotes. The above image shows double quotes, but it is much easier to use single quotes in Ninox, to avoid ending the string being passed to the html() function.

END TAG

The end tag is always in the form of “</tagname>” and simply delineates the end of the element’s contents.

ELEMENT CONTENTS

The element contents can be either plain text, which will be rendered to the page, or can be one or more HTML elements Nested within the parent element. An example of this is shown below. 

							
					html("
    <ol>
		<li>item one</li>
		<li>item two</li>
		<li>item three</li>
	</ol>
")

The “ol” tag name specifies an ordered list element which is rendered in a specific way by the browser.  In the above example the “ol” element contains three “li” (list item) elements, each of which contains its own text contents.

FURTHER READING

This article barely scratched the surface, but thankfully there are a host of free resources online for learning HTML.

  • Go here for a getting started tutorial in HTML.  
  • Go here to write HTML online and see the results immediately.

You can also pay for online courses at sites like udemy.com to get excellent content to learn HTML, CSS and Javascript inexpensively. 

en_USEN
de_DEDE en_USEN