State & Context

State and Context objects are the two most essential concepts to understand how apps work, and how to build them. They enable client-server communication for full-stack Python web apps, by passing information between client and server, and instructing the client on rendering UI components.

State and Context are always accessible throughout apps, via Functions.

State

What is state?

In Dropbase apps, State is an object that has data about user inputs and table data. This includes:

• The row of a table currently selected
• Any input entered by users in a widget
• Any values selected in a dropdown in a widget

Structure

The state object is split into tables and widgets. Here's a sample structure of a state object that contains multiple tables and UI components:

state
  tables
    table1
      name
    table2
      address
  widgets
    widget1
      components
        new_name
        state

Tables state

Let's take a look at the tables state.

Tables (state.tables) will contain all the tables in your app. Each table will contain information about the columns present in the row selected by the user in that table.

For example, if you have a table called customers, and you want access to the name column of the row selected by the user, you can access it like this:

state.tables.customers.name

Widgets state

Widgets (state.widgets) will contain all the widgets in your app. Each widget will contain information about the UI components, like inputs and dropdowns, present in that widget.

For example, if you have a widget called new_customer, and you want access to the value entered by the user in the new_name input, you can access it like this:

state.widgets.new_customer.components.new_name

Context

What is context?

In Dropbase apps, Context is an object that has data about UI component properties. Generally, it is used to affect how components are rendered in the UI.

Structure

The context object is structured similarly to the state object, with tables and widgets. Here's a sample structure of a context object that contains multiple tables and UI components:

context
  tables
    table1
      message
      message_type
      columns
        name
          editable
          visible
          message
          message_tyep
  widgets
    widget1
      components
        new_name
            visible
            message
            message_type
        state
            visible
            options
                0
                  id
                  name
                  value
                1
                  id
                  name
                  value

Common properties

The context object contains common properties for all UI components, such as visible, message, and message_type. These properties can be accessed or modified, which may affect how a UI component is rendered by the client.

• Visible: This property is used to control the visibility of a UI component. If set to True, the component will be visible in the UI. If set to False, the component will be hidden.
• Message: This property is used to display a message to the user. It is often used to display error messages or other notifications.
• Message Type: This property is used to specify the type of message being displayed. It can be used to differentiate between different types of messages, such as errors, warnings, or success messages.
• Reload: This property is used to trigger a reload of a table. If set to True, the table will be reloaded once. It will be set to False after the table is reloaded. Note: This property is only available for tables.

Using state and context

The state and context objects are similar in structure, but they serve different purposes. The state object contains data about user inputs, while the context object contains data about UI component properties.

Let's go through some examples to understand when and how to use state and context objects.

Example 1: You want to query a table based on the selected row in another table

In this case, you would use the state object because we want to use the selected row from one table to query another table.

Example 2: You want to hide a widget based on a user input

In this case, you would use the state object to access the user input, and the context object to modify the visibility property of the widget.

Example 3: You want to display a message to the user when they enter an invalid input

In this case, you would use the state object to access the user input, and the context object to modify the message and message_type properties of the UI component.