Custom page

The CustomPageContext interface provides a set of properties to interact with the current page within your custom app. This allows you to manipulate titles, badges, visibility, and components on the fly.

Declaration

const currentPage: 

Interface

interface CustomPageContext {
  get title(): string;
  get badge(): string;
  get isHidden(): boolean;
  get components(): { [componentTagName: string]: CustomPageComponents }
}

// all component interfaces below
type CustomPageComponents =  |  | ... 

Component Tag

Each component within a custom page can be accessed by its unique tag name, available in the editor.

Example Usage To fetch the text of a component tagged as largeHeading, use:

// example usage:
const largeHeadingText = currentPage.components.largeHeading.text

Components Interfaces

Properties not marked with get (read-only) can be changed. For example, you can change text styles when the user taps a button.

Text

type TextStyle ="h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "paragraph"
type TextAlignment = "leading" | "center" | "trailing"

interface TextComponent {
  get text(): string;
  get isHidden(): boolean;
  get tag(): string;

  style: TextStyle;
  alignment: TextAlignment;
}

Boolean Input

interface BooleanInputComponent {
  get isHidden(): boolean;
  get tag(): string;
  get disabled(): boolean;
  
  value: boolean;
}

Date Time Input

interface DateTimeInputComponent {
  get isHidden(): boolean;
  get tag(): string;
  get disabled(): boolean;
  get label(): string | undefined;

  value: Date;
  mode: "date" | "dateAndTime";
}

Number Input

interface NumberInputComponent {
  get isHidden(): boolean;
  get tag(): string;
  get disabled(): boolean;
  get label(): string | undefined;

  value: number;
}

Text Input

interface TextInputComponent {
  get isHidden(): boolean;
  get tag(): string;
  get disabled(): boolean;
  get label(): string | undefined;
  
  value: string;
}

Options Input

interface OptionsInputComponent {
  get isHidden(): boolean;
  get tag(): string;
  get disabled(): boolean;
  
  get label(): string | undefined;

  availableOptions: string[];
  selectedOptions: string[];
  style: "list" | "chip";
  allowMultipleSelection: boolean;
}

Barcode Input

interface BarcodeInputComponent {
  get isHidden(): boolean;
  get tag(): string;
  get disabled(): boolean;
  
  get label(): string | undefined;
  value: string;
  allowedBarcodeTypes: BarcodeType[];
}

type BarcodeType =
  | "qr"
  | "code39"
  | "code128"
  | "code93"
  | "ean-13"
  | "ean-8"
  | "jan"
  | "upc-e"
  | "upc-a"
  | "code11";

Attachment Input

interface File {
  get name(): string
  get uploadedUrl(): string | undefined
  get size(): number
  get mimeType(): string
}

interface AttachmentInputComponent {
  get isHidden(): boolean;
  get tag(): string;
  get disabled(): boolean;
  
  get value(): File[];
}

Multi Line Text Input

interface MultiLineTextInputComponent {
  get isHidden(): boolean;
  get tag(): string;
  get disabled(): boolean;
  
  get label(): string | undefined;
  value: string;
}

Markdown

interface MarkdownComponent {
  get isHidden(): boolean;
  get tag(): string;
  get markdown(): string | undefined;
}

Audio

interface AudioComponent {
  get isHidden(): boolean;
  get tag(): string;

  get audioUrl(): string | undefined;
  get title(): string | undefined;
  get subtitle(): string | undefined;
  get artworkUrl(): string | undefined;
  get isPlaying(): boolean;

  pause(): boolean;
  resume(): boolean;
  stop(): boolean;
}

Image

interface ImageComponent {
  get isHidden(): boolean;
  get tag(): string;
  get imageUrl(): string | undefined;

  ratio: {
    width: number;
    height: number;
  };
}

Video

interface VideoComponent {
  get isHidden(): boolean;
  get tag(): string;

  get videoUrl(): string | undefined;
  get thumbnailUrl(): string | undefined;
  get title(): string | undefined;
}

File Preview

interface FilePreviewComponent {
  get isHidden(): boolean;
  get tag(): string;

  get fileUrls(): string[];
}

Maps

interface MapsComponent {
  get isHidden(): boolean;
  get tag(): string;

  get mapsUrl(): string | undefined;
}

Web Link

interface WebLinkComponent {
  get isHidden(): boolean;
  get tag(): string;
  get url(): string | undefined;
}

Inline Collection

interface InlineCollectionComponent {
  get isHidden(): boolean;
  get tag(): string;
}

Repeater

interface RepeaterComponent {
  get isHidden(): boolean;
  get tag(): string;
  
  direction: "vertical" | "horizontal";
}

interface BarcodeComponent {
  get isHidden(): boolean;
  get tag(): string;

  get title(): string | undefined;
  get barcodeValue(): string | undefined;
  get barcodeType(): BarcodeType;
}

Progress

interface ProgressComponent {
  get isHidden(): boolean;
  get tag(): string;

  get title(): string | undefined;
  get value(): number;
  get maxValue(): number;
  get minValue(): number;

  style: "bar" | "ring" | "rating";
}

Charts

interface ChartComponent {
  get isHidden(): boolean;
  get tag(): string;
}

Callout

interface CalloutComponent {
  get isHidden(): boolean;
  get tag(): string;

  get title(): string | undefined;
  get message(): string | undefined;

  style: "success" | "warning" | "error" | "info";
}

Table

interface TableComponent {
  get isHidden(): boolean;
  get tag(): string;

  get name(): string | undefined;
  get items(): Record<string, string>[];
}

Links

interface Link {
  get isHidden(): boolean;
  get tag(): string;
  
  get label(): string | undefined;
  get websiteUrl(): string | undefined;
  get pageId(): string | undefined;
}

interface LinksComponent extends Component {
  style: "list" | "grid";
  get links(): Link[];
}

Button

interface ButtonComponent {
  get isHidden(): boolean;
  get tag(): string;

  get title(): string | undefined;
  style: "filled" | "outline" | "tinted" | "plain";
  role: "default" | "destructive";
  size: "fit" | "fill";
}