Skip to main content

Creating Your First Page

Now that we have an FMC Screen created, it will not render anything by default. We need to create our first page and make the screen show it by default.

Creating the Page Class​

export class ExamplePage extends MyFmcPage {
  public override render(): FmcRenderTemplate[] {
    return [
      [
        ["HELLO WORLD!"]
      ]
    ];
  }
}

Registering the Page​

We need to tell our FMC screen about our new page. To do this, we must tell it what route it is on. A route is a string, conventionally starting with a slash (/), indicating on which "path" the page is present.

class MyCduDisplay /* ... */ {
  /* ... */
  private initialiseFmcScreen(fmcScreen: MyFmcScreen): void {
    /* ... */

    // Here, we tell the FMC screen that when route "/" is navigated to, we should show an `ExamplePage`
    fmcScreen.addPageRoute("/example", ExamplePage);
    // You can optionally specify an event (key of our event type) which will have the same effect
    // as navigating to the route manually: (replace the line above)
    fmcScreen.addPageRoute("/example", ExamplePage, "example_page");

    // We tell the FMC screen to navigate to route "/". This will cause an instance of `ExamplePage` to be created and rendered.
    fmcScreen.navigateTo("/example");
  }
  /* ... */
}