Skip to content

Pages

Definitions

Pages allow you to build custom graphical interfaces using Blocks provided by your workspace and its AppInstances :

image

At the right appears the list of available blocks separated by AppInstance : multiple instances of the same app will provide the same blocks, each of them consuming the data, endpoints & configuration from their respective instance.

Blocks

Blocks are web graphical components hosted anywhere on the web, which can then be integrated & configured inside a Page.

In order to make a block available to the page editor, it needs to be declared inside a blocks field at the root of the workspace source code :

blocks:
  config:
    name: Block name
    description: Block description 
    url: https://cdn.company.com/public/someblock/main.js
  • The lowercased editor stands for the technical name that will be referenced inside your pages
  • The name: Editor stands for the human readable name showing up inside the page editor
  • url might references a .js entrypoint for the block, or any other URL that will be loaded inside an iframe.

If url points to a .js file, this must be the entrypoint of a BlockProtocol module.

Builtin functionnalities

A page is like a BlocksList Block, but with built-in functionnalities. Here the list of thing you can activate by passing the correct parameter to the page from updateOn event or init autoamtion:

Redirection

You can initiate a redirection to another page by sending an object with a reidrect key. This object will may contains the following attributes:

  • url: The url where to redirect. It can be a relative or absolute one. If not set, the current location will be used, usefull when you just want to change the current language.
  • locale: Change the current locale.
  • method: HTTP method. Default is get. Can be post.
  • body: object going with post redirection and acting as body.
  • push: will use pushState method which will change the current browser url without reloading the page.