Luke at 11:07, 13 July 2022

2022-07-13T11:07:02Z

← Older revision		Revision as of 11:07, 13 July 2022
Line 55:		Line 55:

	If you have a jsx prop in your propTypes, the editor will assume that the prop can receive a JSX structure. The editor then allows inline visual editing of the props value and that includes adding a Token into it amongst all other formatting. With the editor, add a Token and inside it type out the name of the value you want (such as session.user.username). Internally it will then be substituted when the token is rendered.		If you have a jsx prop in your propTypes, the editor will assume that the prop can receive a JSX structure. The editor then allows inline visual editing of the props value and that includes adding a Token into it amongst all other formatting. With the editor, add a Token and inside it type out the name of the value you want (such as session.user.username). Internally it will then be substituted when the token is rendered.

			=Available values=

			A token currently supports the following:

			* ${session. .. - For accessing values in the session such as the user and locale.

			* ${url. .. - For accessing [[Editing Pages\|URL tokens]].

			* ${po. .. - For accessing fields of the primary object.

			* ${customData. .. - This is the same as po, but is named so it's easier to find when creating custom data in [[Sending Emails\|emails]].

			* ${content. .. - For accessing fields of the nearest parent <Content>. For example if we're inside <Content type='blog' id={14}> then ${content.slug} would be the slug of the blog.

			* ${theme. .. - For CSS variables from the theme. ${theme.primary} for example.

Luke: Created page with "Tokens are a way of allowing textual references to dynamic values - for example, the current users name. This means you can make a "Hello FIRSTNAME!" without actually putting..."

2022-07-13T10:59:48Z

Created page with "Tokens are a way of allowing textual references to dynamic values - for example, the current users name. This means you can make a "Hello FIRSTNAME!" without actually putting..."

New page

Tokens are a way of allowing textual references to dynamic values - for example, the current users name. This means you can make a "Hello FIRSTNAME!" without actually putting it in the code, which makes it easier to handle content which is typically edited regularly such as an [[Sending Emails|email template]].

Tokens are modelled on [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals Javascript template literals]. Javascript template literals are directly supported by the localisation system as well meaning both tokens and translatable text in your source are very closely related.

=Hello firstname!=

Let's take an example - the following string:

Hello ${session.user.firstName}!

This could be a prop on a component provided by the editor in the admin panel. In the code, if we know we have been given a string that may contain tokens, the tokens can then be swapped out like so:

<syntaxhighlight lang="js">

// Assuming a hooks based React component. Non-hooks is further down.
import {useTokens} from 'UI/Token';

...

// Assuming "bodyText" contains the above string.
var inputText = props.bodyText;

// Swaps the ${tokens} with their underlying value.
var processedText = useTokens(inputText);

return <h1>{processedText}</h1>; // Hello You!

</syntaxhighlight>

Note that as this is accessing the [[Session|session]], it works with any value you have in there. Specifically for the example above, your User type must have a FirstName field on it (which isn't available by default but is after installing Api/UserFullNames).

session.locale.name, session.user.username, session.user.id and so on - are all available textually to the person using the editor.

If you're writing a traditional React component (one without hooks):

<syntaxhighlight lang="js">

import { TokenResolver } from 'UI/Token';

...

var inputText = 'Hello ${session.user.firstName}!'; // Assuming this is from a prop. If it was actually inline like this, use a JS template literal instead.

return <TokenResolver value={inputText}>
{processedText => {

return <h1>{processedText}</h1>;
}}
</TokenResolver>;

</syntaxhighlight>

=Automatic Tokens=

If you have a jsx prop in your propTypes, the editor will assume that the prop can receive a JSX structure. The editor then allows inline visual editing of the props value and that includes adding a Token into it amongst all other formatting. With the editor, add a Token and inside it type out the name of the value you want (such as session.user.username). Internally it will then be substituted when the token is rendered.

Tokens - Revision history

Luke at 11:07, 13 July 2022

Luke: Created page with "Tokens are a way of allowing textual references to dynamic values - for example, the current users name. This means you can make a "Hello FIRSTNAME!" without actually putting..."