Documentation
Feedback
Guides
App Development

App Development
Development guides
Creating an interface for your app settings

Learn how to create a user interface for your app and fetch data from it.

When developing a VTEX IO app, you can create an interface for accepting custom user settings. The app settings interface allows you to retrieve data provided by the user and enable or modify an app behavior based on it. The configuration possibilities depend on the type of data collected by the interface and the intended use.

This guide outlines the process of creating such an interface and using the data input by users within your app.

Usage example

The app settings interface displays configuration forms for installed apps in the App Store. This interface is defined via the settingsSchema field on manifest.json, where an app may declare the schema of its configuration.

See the Google Tag Manager app interface in the example below, with the appropriate configuration of the settingsSchema field in the manifest.json file.

{"base64":"  ","img":{"width":680,"height":580,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":39006,"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/112641072/313303895-d916b8da-0039-4364-b21e-a8cf8ba629dd.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20241011%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241011T144631Z&X-Amz-Expires=300&X-Amz-Signature=1a4c40d69544b03ce17012b3fba196afbb3727486601ea7773fb32a137feab7c&X-Amz-SignedHeaders=host"}}
{"base64":"  ","img":{"width":680,"height":606,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":75826,"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/112641072/312610776-db87ac7e-7e36-4656-8ddb-b7735b5b92f4.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20241011%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241011T144631Z&X-Amz-Expires=300&X-Amz-Signature=ae39cfc9f2d5dfb7028034a398c75ea77ee7120caa80a06efbe30fb84a709505&X-Amz-SignedHeaders=host"}}

After building the settings interface for your app, you need to consume the data provided by the app’s user. Consider the Google Tag Manager example above retrieving the GTM ID.

Based on the given example, below is a step-by-step guide for creating an interface for your app and retrieving the data to use within the app.

Instructions

Step 1 - Creating the settings interface

Open your app project in any code editor of your choice and open the manifest.json file.

Define the settingsSchema object, declaring a JSON Schema containing the fields that meet your business needs. See the JSON Schema documentation to build the settingsSchema field correctly.

The JSON Schema offers a predefined model that outlines how the settings should be formatted in your app. Note that, according to the JSON Schema specification, the types accepted within a property include: string, number, integer, boolean, object, array, or null. It is also possible to use arrays of types (e.g., [string, number]) to indicate that the property accepts multiple types.

Considering the example of the Google Tag Manager interface previously presented, the settingsSchema object was configured as follows:


_22
"settingsSchema": {
_22
"title": "Google Tag Manager",
_22
"type": "object",
_22
"bindingBounded": true,
_22
"properties": {
_22
"gtmId": {
_22
"title": "Google Tag Manager",
_22
"description": "Enter the ID (GTM-XXXX) from your Google Tag Manager",
_22
"type": "string"
_22
},
_22
"allowCustomHtmlTags": {
_22
"title": "Allow Custom HTML tags",
_22
"description": "Beware that using Custom HTML tags can drastically impact the store's performance",
_22
"type": "boolean"
_22
},
_22
"sendGA4Events": {
_22
"title": "Send Google Analytics 4 Events",
_22
"description": "When this setting is active, also send the GA4 version of the events",
_22
"type": "boolean"
_22
}
_22
}
_22
},

This code defines a schema for the settings UI that interacts with the Google Tag Manager app. The configured fields are described below:

  • title: App name shown in the app settings interface. It is recommended to use the same app name configured in the title field of the manifest.json file.
  • type: JSON Schema type (this must always be set as object).
  • description (optional): Description of the settingsSchema field.
  • properties: Key-value pairs that define the fields that will be displayed to the app users, with their own definition within this object. Each defined key accepts the following properties: title, description, and type.
  • gtmId: String-type property that represents the Google Tag Manager ID. In the settings UI, this property is shown as a text box.
  • allowCustomHtmlTags: Boolean-type property that determines whether custom HTML tags are allowed. In the settings UI, this property is shown as a checkbox.
  • sendGA4Events: Boolean-type property that indicates whether to send Google Analytics 4 events. In the settings UI, this property is shown as a checkbox.

Step 2 - Retrieving and consuming the app settings data

On your app’s code, you can retrieve the app settings in two ways:

  • Frontend apps: Fetch the data using a GraphQL query.
  • Backend apps: Use the getAppSettings method from the ctx.clients.apps client.

Below is an example of each case.

Frontend apps

  1. In the manifest.json file, add the vtex.apps-graphql 3.x within the dependencies field.
  2. In the react directory, create a new folder named queries.
  3. Create a new graphql file (e.g., AppSettings.graphql) and query the settings options as in the following example.

_10
query getSettings {
_10
publicSettingsForApp(app: "{vendor}.{app.name}", version: "0.x")
_10
@context(provider: "vtex.apps-graphql") {
_10
message
_10
}
_10
}

Replace vendor, app.name, and 0.x with values based on your scenario.

The example above is a GraphQL query that fetches the data of a specific app declared in the arguments of publicSettingsForApp field: the app and its version. The configured fields are described below:

  • @context(provider: “vtex.apps-graphql”): The context for the query. In this case, it must be configured as “vtex.apps-graphql”.
  • message: The message field to be included in the query result, which is a field within the publicSettingsForApp object. Note that the message may vary depending on the app's settingsSchema.

This query will return an object like the one below:


_10
{
_10
"data": {
_10
"publicSettingsForApp": {
_10
"message": "{\"maxNumberOfItemsToCompare\":2}"
_10
}
_10
}
_10
}

Please be aware that only settings labeled with public access in the settingsSchema will be returned.

  1. Open the tsx file of the React component that will consume this information (e.g., ProductComparisonContext.tsx) and import the GraphQL query:

_10
import AppSettings from './queries/AppSettings.graphql'

  1. Parse and use the defined query (e.g., AppSettings) value based on your needs. Check the example below:

_24
const { data: appSettingsData } = useQuery(AppSettings, {
_24
variables: {
_24
// eslint-disable-next-line no-undef
_24
version: process.env.VTEX_APP_VERSION,
_24
},
_24
ssr: false,
_24
})
_24
_24
useEffect(() => {
_24
const appSettings = JSON.parse(
_24
pathOr(`\{\}`, ['publicSettingsForApp', 'message'], appSettingsData)
_24
)
_24
_24
dispatch({
_24
type: 'SET_MAX_LIMIT',
_24
args: {
_24
maxLimit: pathOr(
_24
MAX_ITEMS_TO_COMPARE,
_24
['maxNumberOfItemsToCompare'],
_24
appSettings
_24
),
_24
},
_24
})
_24
}, [appSettingsData])

The code above interacts with an API through a GraphQL query, which is managed by the useQuery hook, to fetch the app settings. It then parses and updates the app’s state with these settings using a useEffect hook whenever the settings data changes.

Backend apps

  1. Open your node app in any code editor of your choice.
  2. Declare a new function (e.g., getConfig) and use the getAppSettings method to retrieve and return the app settings data. Consider the example below:

_15
export async function getConfig: async (_: any, __: any, ctx: Context) => {
_15
const {
_15
clients: { apps },
_15
vtex: { logger },
_15
} = ctx
_15
_15
const appId = process.env.VTEX_APP_ID
_15
_15
return apps.getAppSettings(appId).catch((error) => {
_15
logger.error({
_15
message: 'getConfig-getAppSettings-error',
_15
error,
_15
})
_15
})
_15
},

The getConfig function returns a promise as it fetches the app settings and handles errors. It retrieves an app ID from environment variables, uses it to request settings, and logs any errors that occur.

  1. Import the defined function and consume it based on your needs.
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page