Articles in this section

See more

Literal

Avatar
Kyle Theobald
  • Updated
Follow

Overview

A Literal Field in Softools is used to display fixed, static content within an application. It does not store or process user input and is not dynamically calculated.

The most common uses for Literal Fields are:

  • Displaying headings within forms and templates
  • Providing on-screen instructions to guide users
  • Presenting informational or contextual content

Because the content is defined once and does not change dynamically, Literal Fields are ideal for improving usability, clarity, and user experience within an application.

 

Example

 

 

Configuring a new Literal Field

To create a new Literal Field, you must first be in the 'Fields' section of AppStudio, here you will be able to click the 'Add Field' button in at least one of the highlighted locations below.

This will open the following page where you can scroll down and select the Literal Field tile or search for it in the top right bar:

 

 

Configuration Properties

Common Properties

  • Label: Visible in the App above the entry box it makes clear to the user what data is being displayed in the Field.
  • Identifier: This should reflect the label. The identifier is a system ID for referencing a Field. This ID must be unique per Field and must contain only letters and numbers starting with a letter. It must also be a minimum of three characters.
  • Type: The sort of Field that is being configured - With some types this can be edited in the future providing the data type is cross-compatible.

For a Literal Field, the only other parameter that is used is:

Default Value

  • The Default Value defines static content only. This is commonly:
    • Headings
    • Instructions
    • Informational content within templates
  • Whatever is entered here will appear wherever the Literal Field is used in templates. The Literal Field outputs static content only and the value does not change dynamically
  • This can include plain text or HTML

⚠️ The Expression parameter is not used for Literal Fields

 

 

Display Capabilities

1. Plain Text

The simplest use case is displaying fixed text:

Project Status Overview

 

2. Formatted Text Using HTML

Literal Fields support HTML, allowing enhanced formatting.

<p><strong>Project Financial Information</strong> is pulled from the <strong>Financial Team's Accountancy Software</strong> and updated automatically <strong>every week</strong> to ensure <strong>Data Accuracy</strong>.</p>

 

 

3. Instructions with Visual Indicators

This can be achieved effectively with emojis or with a bit more advanced HTML, image tags.

Fill in the <strong>Milestone Target Dates</strong> for the Projects. When the Project is running <strong>regularly review the status</strong> of each Project Phase. <br /> 
🔴Schedule Dates are not being met, immediate action required to meet Target Dates<br />
🟡Schedule is At Risk, address the Actions for this deliverable to get it back On Track<br />
🟢No concerns in meeting the Schedule Dates<br />

 

 

4. Structured Content (Lists)

<ul>
<li><strong>Value - </strong>The extent to which the project delivers meaningful benefits relative to its cost and effort.</li>
<li><strong>Suitability - </strong>How well the project aligns with strategic goals, user needs, and organisational priorities.</li>
<li><strong>Acceptable - </strong>Whether key stakeholders are willing to support the project given its risks, costs, and impacts.</li>
<li><strong>Feasibility - </strong>The practicality of delivering the project with available resources, skills, time, and technology.</li>
<li><strong>Enduring - </strong>The project’s ability to remain useful and relevant over the long term, not just in the short term.</li>
</ul>

 

 

5. Advanced HTML (Images & Layouts)

Literal Fields can render more advanced HTML, including images and styled layouts:

<h1>Welcome 👋</h1>
<p>Click the <strong>button below to get started</strong>.</p>

<div style="position:relative; width:100%; padding:120px 300px; color:white; overflow:hidden;">

  <img src="https://images.squarespace-cdn.com/content/v1/60e84e35fc14466f9494be26/28127b18-8636-4dd8-899a-0427a051e1cf/d1c87872-d5ec-98cd-cf17-a414f8309d7a.png"
       style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0;">

  <div style="position:relative; z-index:1;">
    <h2>Welcome App Builder</h2>
    <p>Learning to build & deploy Softools Applications</p>
  </div>

</div>

 

 

Named Styles

In addition to HTML, Named Styles can be used to format the text displayed in a Literal Field. This allows you to control the appearance (e.g. font size, colour, boldness) in a consistent and reusable way across your application. This reduces the amount of inline HTML styling needed to give an engaging UI.

Styles are created in the Styles area on the App Studio homepage. Once created, they can be applied to a Literal Field to enhance how the static text is presented—such as making instructions more prominent or aligning text with your application’s branding. Here is an example of bolder, larger, blue text.

 

Now let's take another look at the Literal Headings

 

Apply the Names Style to the Literal Fields

 

This gives a much nicer UI for Users without the need to add inline HTML Styles

 

 

Best Practice

  • Use Literal Fields for presentation, not logic
  • Keep content clear and user-focused
  • Use HTML to improve readability and engagement
  • Avoid overcomplicated layouts that may not render consistently

Related articles

Comments

0 comments

Please sign in to leave a comment.