Skip to main content

Context Object

The Appsmith context object provides information around the current state of the application

How to Use the Appsmith Context Object

Properties​

The Appsmith context object contains the following properties:

{
   store: object,
   URL: object,
   user: object,
   geolocation: object,
   mode: enum
}

Store​

This object contains the key-value pairs of the local storage of the app. Values to the store can be updated using the storeValue function. Values from the store can be accessed using their key.

{{ appsmith.store.key }}

URL​

This object contains all the values associated with the current URL that the user is on. The queryParams object of this field can be used to read data sent from other pages to this page using the navigateTo function. Values from the URL can be accessed using:

{{ appsmith.URL }}
{
  host: string,
  hostName: string,
  fullPath: string,
  pathName: string,
  port: string,
  protocol: string,
  hash: string,
  queryParams: object
}

host​

The host property of the URL interface is a string that includes the hostname, and then, a :, followed by the port of the URL(if the port is available).

Example:

//{{appsmith.URL.host}}
host:"app.appsmith.com:111"

hostName​

The hostname property of the URL is a string that holds the domain of the URL. In simple words, hostname is the host name (without the port number).

Example:

//{{appsmith.URL.hostname}}
hostName:"app.appsmith.com"

fullPath​

A full-path URL designates an EXACT location (such as a page, app, file, etc.). In addition to the Domain and Top Level Domain(TLD), a full-path URL needs to include the protocol, subdomain (such as "app," "support," etc.), path/destination, and possibly a file extension as well as query parameters. A full-path can include:

  • Protocol
  • Subdomain
  • Domain Name
  • Top Level Domain (TLD)
  • Path
  • Parameters

Example:

//{{appsmith.URL.fullPath}}
fullPath:"https://app.appsmith.com/app/demo-app/page1-6324031aa"
info

In the preceding example, 6324031aa represents the id of the page named page1. The current page slug in the URL is created by combining $pageName-$pageId. Each page has a unique page id that is assigned to it.

pathName​

It is a string made up of a collection of path segments, each of which has the / character prefixed to it. The empty string will be the value of the pathname property if the URL has no path segments.

Example:

//{{appsmith.URL.pathname}}
pathName:"/app/demo-app/page1-6324031aa"

port​

The port property of the URL is a string that contains the port number of the URL.

Example:

//{{appsmith.URL.port}}
port:"3000"

protocol​

The protocol property of the URL is a string that represents the protocol scheme of the URL, including the :.

The resource name and the protocol identification are separated from one another by a colon and two forward slashes.

Example:

//{{appsmith.URL.protocol}}
protocol:"https:"

hash​

The appsmith.URL.hash value is the string after the hashtag (including #). The URL fragment identification is followed by a hash symbol (#), which is the hash property of the URL interface.

Example:

//{{appsmith.URL.hash}}
hash:"#n912xhego"

queryParams​

Query parameters are a predefined set of parameters that define particular content or actions based on the data being delivered. A URL has all the query parameters appended at the end with a ? as a separator.

Example:

//{{appsmith.URL.queryParams}}
queryParams:"?name=value&variable=value"

User​

This object contains the data of the currently authenticated user.

{
  email: string
  username: string
  name: string
  isEnabled: boolean
  accountNonExpired: boolean
  accountNonLocked: boolean
  credentialsNonExpired: boolean
  isAnonymous: boolean
}

Geolocation​

This object contains functions to request the current user location and the coordinates received from this request https://developer.mozilla.org/en-US/docs/Web/API/Geolocation\_API .

{
 canBeRequested: boolean,
 getCurrentPosition: Function,
 watchPosition: Function,
 clearWatch: Function,
 currentPosition: {
   coords: {
      accuracy: number,
      altitude: number | null,
      altitudeAccuracy: number | null,
      heading: number | null,
      latitude: number,
      longitude: number,
      speed: number | mull,
   },
   timestamp: number,
 }
}

getCurrentPosition

Signature:

(
 onSuccessCallback?,
 onErrorCallback?,
 options?: { maximumAge?: number, timeout?: number, enableHighAccuracy?: boolean } 
) -> void

Almost similar to the original browser API, apart from the fact that you don't need to pass the success callback. On success, the location would automatically be stored at appsmith.geolocation.currentPosition.coords. If onSuccessCallback is passed, it would be called with the location information received.

watchPosition

Signature:

(
  onSuccessCallback?,
  onErrorCallback?,
  options?: { maximumAge?: number, timeout?: number, enableHighAccuracy?: boolean } 
) -> void

Almost similar to the original browser API, apart from the fact that you don't need to pass the success callback. On success, the location would automatically be stored at appsmith.geolocation.currentPosition.coords with the appsmith.geolocation.currentPosition.timestamp updated whenever the position was last updated. The callbacks, if provided, gets executed automatically when the location has changed. No watchId is returned as well as the platform only allow for a single watchPosition

clearWatch

Signature: () -> Promise

Almost similar to the original browser API, apart from the fact that you don't have to pass the watchId. If a watch is active, you must clear it before starting a new one.

Mode​

This field is an enum that contains whether the app is currently running in view mode or edit mode. It takes the values VIEW|EDIT