Page Data

Making Pages Dynamic

As you probably have already noticed, there are many pages in the theme displaying data from your account. For example, the name of your space is displayed in one of the sections in the navigation bar.


Click on the image to make it larger

To get data from your account and print it in the space website we use a special syntax. For example, to print the name of your space in the navigation bar we can do the following:


Click on the image to make it larger

The syntax "{{ ... }}" prints a piece of data coming from your account. In this case, it prints the name of the business, which is how we call spaces internally.

Each page has access to a set of data, for example, the page rendering the booking calendar has access to all the bookings made in the space and also all the events happening in the next 6 months.

It's important to remember that you can only print the data which is available to the page you are editting. For example, if you are in the contact page, the bookings data is not available and therefore you cannot render a list of bookings in the contact page (even in you wanted to!).


What data is available

As we mentioned earlier, not all data in your account is available to all pages in the space website, but there is a sub-set of this data which is available in every page. We call this "Common Data".

For every page, there is a set of data availably only to that page. This is, for example, the data about the profile of a member in the member details page. We call this data "Page Specific Data"


Filters

Filters are useful when modifying data before is rendered in the screen. For example, to format dates or numbers.

You use filters after the pipe (|) symbol. For example:

{{ data.Coworker.FullName | Upcase }}

These are the filters available:

Size

Return the size of an array or of an string

{{ data.Coworker.Contracts | Size }}

Slice

Return a Part of a String

{{ data.Coworker.FullName | Slice: start, length  }}

Downcase

Convert a input string to DOWNCASE

{{ data.Coworker.FullName | Downcase  }}

Upcase

Convert a input string to UPCASE

{{ data.Coworker.FullName | Upcase  }}

Capitalize

Capitalize words in the input sentence

{{ data.Coworker.FullName | Capitalize  }}

Escape

Encodes a string to be displayed in a browser

{{ data.Coworker.FullName | Escape  }}
or
{{ data.Coworker.FullName | H  }}

Truncate

Truncates a string down to N characters

{{ data.Coworker.FullName | Truncate: N, "..."  }}

Split

Split input string into an array of substrings separated by given pattern. Returns a list

{{ data.Coworker.FullName | Split: 5, pattern  }}

StripHtml

Removes any HTML mark-up from a string

{{ data.Coworker.ProfileSummary | StripHtml }}

StripNewlines

Removes any HTML mark-up from a string

{{ data.Coworker.ProfileSummary | StripNewlines }}

StripNewlines

Join elements of the array with a certain character between them

{{ data.Coworker.Teams | Join: ", " }}

Sort

Sort elements of the array by a property

{{ data.Coworker.Teams | Sort: 'Name'}}

Map

Map/collect on a given property

{{ data.Coworker.Teams | Map: 'Name'}}

Replace

Replace occurrences of a string with another

{{ data.Coworker.FullName | Replace: 'Jonathan', 'John'}}

ReplaceFirst

Replace the first occurence of a string with another

{{ data.Coworker.FullName | ReplaceFirst: 'Jonathan', 'John'}}

Remove

Remove a substring

{{ data.Coworker.Email | Remove: '@'}}

RemoveFirst

Remove the first occurrence of a substring

{{ data.Coworker.Email | RemoveFirst: '@'}}

Append

Add one string to another

{{ data.Coworker.Email | Append: ' (keep secret)'}}

Prepend

Prepend a string to another

{{ data.Coworker.Email | Prepend: 'Reach me at: '}}

NewlineToBr

Add
tags in front of all newlines in input string

{{ data.Coworker.ProfileSummary | NewlineToBr }}

Date

Formats a date using a standard date format string: https://msdn.microsoft.com/en-us/library/az4se3k1(v=vs.110).aspx

{{ data.Coworker.CreatedOn | Date: 'yyyy-MM-dd' }}

First

Get the first element of a list

{{ data.Coworker.Contracts | First }}

First

Get the first element of a last

{{ data.Coworker.Contracts | Last }}

Plus

Adds two numbers

{{ data.Coworker.Contracts | Size | Plus: 10 }}

Minus

Substracts two numbers

{{ data.Coworker.Contracts | Size | Minus: 10 }}

Times

Multiplies two numbers

{{ data.Coworker.Contracts | Times | Minus: 10 }}

DividedBy

Divides two numbers

{{ data.Coworker.Contracts | DividedBy | Minus: 10 }}

AddDays

Adds a number of days to a date

{{ data.Coworker.CreatedOn | AddDays: 10}}

AddMinutes

Adds a number of minutes to a date

{{ data.Coworker.CreatedOn | AddMinutes: 10}}

Clean

Returns a SLUG url from a string

{{ data.Coworker.FullName | Clean}}

FormatString

Formats a string

{{ 'Hello {0}' | FormatString: data.Coworker.FullName }}

FormatDecimal

Formats a decimal number

{{ 'Price {0:0.00}' | FormatDecimal: data.Tariff.Price }}

FormatInteger

Formats a integer number

{{ 'Price {0:0}' | FormatInteger: data.Contract.Quantity }}

FormatDate

Formats a date using a standard format string: https://msdn.microsoft.com/en-us/library/az4se3k1(v=vs.110).aspx

{{ 'Date of Birth {0:YYYY-MMM}' | FormatDate: data.Coworker.DateOfBirth }}

FormatDateString

Parses and date string and formats it using a standard format string: https://msdn.microsoft.com/en-us/library/az4se3k1(v=vs.110).aspx

{{ 'Date: {0:YYYY-MMM}' | FormatDateString: '2016-01-01' }}


Source: XML ! RSS