Navigation

Let's remind that within a file, you can declare methods that link an address and request type to the code that prepares the response.

/**
 * Example: file catalog.tsx in account test
 * The screen will open at the address
 * https://test.chatium.com/catalog
 */
app.screen('/', function(ctx, req) {
    return (
        <screen title="Catalog"/>
    )
})

Navigation Action

To send a user to another screen, the navigate action is used. <!-- TODO link to navigate --> The .navigate() action is applicable for any URL, including external services.

In most cases, navigation occurs within the application or even within a single file. Considering that the application's domain may change, it is recommended to use relative URLs instead of absolute ones for internal navigation. To facilitate relative navigation, Chatium offers the ctx.account object. Here, ctx is the first parameter for each request handling function.

ctx.account

Defines the account within which the current code operates. You can obtain the id or name of the account. To form any URL within the account, you can use the method ctx.account.url().

ctx.account.url('/page')

To create a navigate action to any URL within the account, you should use ctx.account.navigate().

/**
 * Example: file catalog.tsx in account test
 * The screen will open at the address
 * https://test.chatium.com/catalog
 */
app.screen('/', function(ctx, req) {
    return (
        <screen title="Catalog"/>
            <button onClick={ctx.account.navigate('/')}>
                Go to Home
            </button>
        </screen>
    )
})

Defining Screens

Creating screens and transitions between them:

Main screen:

const mainScreen = app.screen ('/', async function(ctx, req) {
  return <screen title="My screen">
      <button 
      onClick={catalogScreen.navigate()}>
        Go to Product List
      </button>
    </screen>
})

Catalog screen:

const catalogScreen = app.screen('/catalog', async function(ctx, req) {
  return <screen title="Catalog. Product List">
      {/* Product list content */}
      <button 
      onClick={ctx.account.navigate('/start')}>
        Go to Home Page
      </button>
  </screen>
})

• Navigation Method: The .navigate() method on constants is used to transition between screens.

• ctx.account Object: Allows obtaining information about the user's account, aiding in personalization and working with user data. This method enables the creation of a clean and structured navigation system in the Chatium application, simplifying the addition of new screens and managing transitions between them. Using ctx.account allows for effective handling of user data, which can significantly enhance the user experience.