Portal 2: Community Edition

Documentation

Home ReferenceVScriptAngelscriptPanorama
GitHub
Edit

Dialog Variables

Dialog variables provide a quick and easy way to substitute text within a snippet or panel from your JavaScript code.

Certain dialog variable types provide additional modifiers that may be used to fine-tune output.

JavaScript API

The following methods may be used to set a dialog variable on a Panel:

Formatting

Dialog variables are specified in layout files in the format {xy:myname}, where xy is a one or two character long format string, and myname is the name of your dialog variable.

There are two parts to the format string: the format and the modifier. The format character comes first and is required. The modifier character comes second and is optional, if supported.

String: s, S

Displays a formatted string.

Modifiers

Name Description
u Upper-case the string
l Lower-case the string
h HTML allowed in string

Examples

Use a dialog variable mytest in a Label:

<Label text="{s:mytest}"/>

Upper-case formatted string:

{su:myupperstring}

Time: t, T

Displays a formatted time.

Use with Panel.SetDialogVariableTime.

Modifiers

Name Description
s Short date
l Long date
t Short time
T Long time, with seconds
r Relative time
d Duration (i.e. 3 hours 40 minutes)
m Minutes
e Server real time

Examples

Time duration:

{td:myvar}

Long date:

{tl:mylongdate}

Currency: m, M

Displays a formatted currency.

Use with Panel.SetDialogVariableFloat.

Modifiers

None.

Examples

None.

Integers: i, I, d, D

Displays a formatted integer.

Use with Panel.SetDialogVariableInt.

Modifiers

Name Description
r Raw number

Examples

Simple integer format:

{d:myvar}

Raw integer format:

{ir:myvar}

Floating Point Numbers: f, F

Displays a formatted floating point number.

Use with Panel.SetDialogVariableFloat.

Modifiers

None.

Examples

Floating-point format:

{F:myfloat}

Also floating-point format:

{f:myfloat}

Unsigned 64-bit Integers: u, U

Displays a formatted uint64.

Use with Panel.SetDialogVariableInt.

Modifiers

None.

Examples

UInt64 format:

{u:myuint64}

Sample Code

The following example code demonstrates the usage of many different types of dialog variables.

<snippets>
    <snippet name="ExampleSnippet">
        <Panel class="full flow-down">
            <Label text="This is a float: {f:myfloat}"/>
            <Label text="This is a string: {s:mystring}"/>
            <Label text="This is an UPPER STRING: {su:myupperstring}"/>
            <Label text="This is a long date: {tl:mytime}" />
            <Label text="This is an integer: {d:myint}" />
        </Panel>
    </snippet>
</snippets>
// Create a panel and load the snippet
const panel = $.CreatePanel('Panel', null, 'test');
panel.LoadLayoutSnippet('ExampleSnippet');

// Set a bunch of dialog variables
panel.SetDialogVariableFloat('myfloat', 32.32);
panel.SetDialogVariable('mystring', 'Hello World!');
panel.SetDialogVariable('myupperstring', 'This text should be all caps');
panel.SetDialogVariableTime('mytime', 1); // January 1st, 1970
panel.SetDialogVariableInt('myint', -1);