App SDK Core Objects

View as Markdown

App SDK Core Objects

Core objects represent the primary data and context models used by the Contentstack App SDK. They define the main interfaces through which apps access contextual information and interact with Contentstack using structured properties, methods, and event callbacks.

The availability of specific core objects depends on the active UI location. Each object exposes a well-defined API surface that supports data access, operations, and event-driven behavior within the scope of that location.

Stack Object

The stack object provides methods to access, manage, and retrieve stack-level data and related entities such as content types, entries, assets, and workflows.

Example:

const stack = sdk.stack;

The following section explains the different methods available in the stack object.

getData()

The getData() method retrieves the data of the current stack.

const stackData = stack.getData();
console.log('Stack name:', stackData.name);
console.log('Stack UID:', stackData.uid);

getAllStacks(orgUid?, params?)

The getAllStacks() method retrieves all stacks in the current organization.

const allStacks = await stack.getAllStacks();
const orgStacks = await stack.getAllStacks('org_uid');

getContentType(uid, params?)

The getContentType() method retrieves data of a single content type.

const contentType = await stack.getContentType('content_type_uid');

getContentTypes(query?, params?)

The getContentTypes() method retrieves data of all content types in the stack.

const contentTypes = await stack.getContentTypes();
const filteredTypes = await stack.getContentTypes({ title: { $regex: 'blog' } });

getEntries(contentType, params?)

The getEntries() method retrieves entries of a specific content type.

const entries = await stack.getEntries('content_type_uid');
const publishedEntries = await stack.getEntries('content_type_uid', { publish: true });

getAssets(query?, params?)

The getAssets() method retrieves assets from the stack.

const assets = await stack.getAssets();
const images = await stack.getAssets({ content_type: 'image/*' });

getGlobalField(uid, params?)

The getGlobalField() method retrieves details of a specific global field.

const globalField = await stack.getGlobalField('global_field_uid');

getGlobalFields(query?, params?)

The getGlobalFields() method retrieves details of all global fields in the stack.

const globalFields = await stack.getGlobalFields();

getReleases(query?, params?)

The getReleases() method retrieves details of all releases in the stack.

const releases = await stack.getReleases();

getPublishes(query?, params?)

The getPublishes() method retrieves details of the publish queue in the stack.

const publishQueue = await stack.getPublishes();

getEnvironment(name, params?)

The getEnvironment() method retrieves details of a specific environment.

const environment = await stack.getEnvironment('production');

getEnvironments(query?, params?)

The getEnvironments() method retrieves details of all environments in the stack.

const environments = await stack.getEnvironments();

getLocale()

The getLocale() method retrieves details of a specific locale.

const locale = await stack.getLocale('en-us');

getLocales()

The getLocales() method retrieves details of all locales in the stack.

const locales = await stack.getLocales();

getWorkflow(uid, params?)

The getWorkflow() method retrieves details of a specific workflow.

const workflow = await stack.getWorkflow('workflow_uid');

getWorkflows(query?, params?)

The getWorkflows() method retrieves all workflows in the stack.

const workflows = await stack.getWorkflows();

getAllBranches()

The getAllBranches() method retrieves all branches in the current stack.

const branches = stack.getAllBranches();

getCurrentBranch()

The getCurrentBranch() method retrieves details of the current branch.

const currentBranch = stack.getCurrentBranch();

getVariantById(variant_uid)

The getVariantById() method retrieves details of a specific variant group.

const variant = await stack.getVariantById('variant_uid');

getManagementTokens()

The getManagementTokens() method retrieves details of all management tokens for the stack.

const tokens = await stack.getManagementTokens();

search(queries, apiKey?)

The search method retrieves search results based on the user query.

const searchResults = await stack.search({
  type: 'entries',
  query: { content_type: 'blog_post' },
  limit: 10
});

Entry Object

The entry object provides access to entry-specific data, operations, and event handling. It is supported in entry-related UI locations such as CustomField, SidebarWidget, RTELocation, and FieldModifier.

Properties

content_type

The content_type property retrieves the content type of the current entry.

const contentType = entry.content_type;
console.log('Content type:', contentType.title);
locale

The locale property retrieves the locale of the current entry.

const locale = entry.locale;
console.log('Entry locale:', locale);

Methods

getData()

The getData() method retrieves the data of the current saved entry.

const entryData = entry.getData();
getDraftData()

The getDraftData() method retrieves the draft data of the current unsaved entry and returns an empty object if no changes exist.

const draftData = await entry.getDraftData();
console.log('Draft data:', draftData);
getField(uid, options?)

The getField() method retrieves the field object for the saved data. useUnsavedSchema affects schema resolution, not the field value.

const titleField = entry.getField('title');
const fieldWithUnsavedSchema = entry.getField('title', { useUnsavedSchema: true });
getPropertySafely(obj, key)

The getPropertySafely() method safely retrieves the value of a property from an object to prevent prototype pollution vulnerabilities.

const value = entry.getPropertySafely(dataObject, 'propertyName');

Events

onSave(callback)

The onSave event is invoked when the entry is saved.

entry.onSave((savedEntry) => {
  console.log('Entry saved:', savedEntry);
});
onChange(callback)

The onChange event executes a callback when the entry is updated.

entry.onChange((unresolvedEntry, resolvedEntry) => {
  console.log('Entry changed:', unresolvedEntry);
  console.log('Resolved entry:', resolvedEntry);
});
onPublish(callback)

The onPublish event executes a callback when the entry is published.

entry.onPublish((publishDetails) => {
  console.log('Entry published:', publishDetails);
});
onUnPublish(callback)

The onUnPublish event executes a callback when the entry is unpublished.

entry.onUnPublish((publishDetails) => {
  console.log('Entry unpublished:', publishDetails);
});

Field Object

The Field object provides access to individual field data, schema information, and field-level operations. It is available only in field-level UI locations such as CustomField and FieldModifier.

Properties

uid

The uid property retrieves the unique identifier of the field.

const fieldUid = field.uid;
console.log('Field UID:', fieldUid);
data_type

The data_type property retrieves the data type of the field.

const dataType = field.data_type;
console.log('Field data type:', dataType);
schema

The schema property retrieves the schema definition of the field.

const fieldSchema = field.schema;
console.log('Field schema:', fieldSchema);

Methods

getData(options?)

The getData() method retrieves the data of the current field.

const fieldData = field.getData();
const resolvedData = field.getData({ resolved: true });
setData(data)

The setData() method sets the data for the current field.

Additional Resources For details about the data shape, data_type validation, retrieving a Field instance, updating multiple fields, and troubleshooting, see Update Fields with SetData Method

await field.setData('new value');
setFocus()

The setFocus() method sets the focus on a field when an app is in use, displaying user presence and highlighting the custom field currently accessed in the Contentstack UI.

await field.setFocus();
onChange(callback)

The onChange() method registers a callback that runs when the field’s data is programmatically updated by another app or extension using setData().

field.onChange((data) => {
  console.log('Field changed:', data);
});

Frame Object

The frame object provides window management and resizing capabilities for UI locations. It is supported in UI locations such as DashboardWidget, GlobalFullPageLocation, and FieldModifierLocation.

The following section explains the different methods available in the frame object.

enableResizing()

The enableResizing() method activates the resize button, allowing users to adjust the window size of a Dashboard Widget.

const frame = dashboard.frame;
await frame.enableResizing();

Returns: Promise<void>

updateHeight(height?)

The updateHeight() method updates the widget height in the Contentstack UI. If no height is provided, it automatically adjusts based on the scroll height.

const frame = customField.frame;
await frame.updateHeight(600);

Parameters:

  • height (optional): The desired height of the iframe window in pixels

Returns: Promise<void>

enableAutoResizing()

The enableAutoResizing() method enables automatic resizing of the widget height.

const frame = fieldModifier.frame;
frame.enableAutoResizing();

Returns: Window — The context of the Window class

disableAutoResizing()

The disableAutoResizing() method disables automatic resizing of the widget height.

const frame = fieldModifier.frame;
frame.disableAutoResizing();

Returns: Window — The context of the Window class

onDashboardResize(callback)

The onDashboardResize() method executes a callback whenever a Dashboard Widget is maximized or minimized.

const frame = dashboard.frame;
frame.onDashboardResize((state) => {
  console.log('Dashboard resized:', state);
});

Parameters:

  • callback: The function to be called when a Dashboard Widget is maximized or minimized

Returns: boolean — true if the operation completes successfully; otherwise false

enablePaddingTop()

The enablePaddingTop method adds padding to the top of the Dashboard Widget.

const frame = dashboard.frame;
await frame.enablePaddingTop();

Returns: Promise<void>

disablePaddingTop()

The disablePaddingTop method removes the padding previously added to the top of the Dashboard Widget.

const frame = dashboard.frame;
await frame.disablePaddingTop();

Returns: Promise<void>

updateDimension(dimension?)

The updateDimension method updates the height and width of the UI location in the Contentstack UI. If no values are provided, it updates based on the current dimensions.

const frame = fieldModifier.frame;
await frame.updateDimension({ height: 400, width: 300 });

Parameters:

  • dimension (optional): Object with height and width properties

Returns: Promise<void>

closeModal()

The closeModal method closes the app modal window.

const frame = fieldModifier.frame;
await frame.closeModal();

Returns: Promise<void>

Store Object

The Store object provides methods to manage key-value data storage within the app environment. This enables apps to persist and retrieve data across sessions without relying on external storage or manual state management.

The following section explains the different methods available in the store object.

get(key)

The get() method retrieves stored data by key.

const value = await store.get('userPreferences');

set(key, value)

The set() method sets data for a specified key.

await store.set('userPreferences', { theme: 'dark' });

getAll()

The getAll() method retrieves all stored data.

const allData = await store.getAll();

remove(key)

The remove() method removes stored data by key.

await store.remove('userPreferences');

clear()

The clear() method clears all stored data.

await store.clear();