JavaScript API Differences Between Sintel Forms and Sintel Apps

Moving from Sintel Forms

Sintel Apps replaces the legacy Sintel Forms SharePoint Add-in with a modern SharePoint Framework (SPFx) –based architecture. This change aligns the platform with Microsoft’s current development model and improves compatibility with modern SharePoint environments.

As part of this transition, several JavaScript API methods have been updated or enhanced to better reflect the capabilities and patterns of the new SPFx-based implementation. The following sections highlight the key differences developers should be aware of when migrating existing Sintel Forms solutions to Sintel Apps.

Key JavaScript API differences

1. getValue (Person field)

Sintel Forms: getValue (Person field). Returns an array even for single-select Person fields.

Sintel Apps: getValue (Person field). Returns a single object for single-select fields:

{ emailAddress: "a@a.com", displayName: "Joe Bloggs" }

2. getValue / setValue

Sintel Forms: getValue / setValue. Generic methods used for most field types.

Sintel Apps: getValue and setValue still work, but it is recommended to use field-specific methods:

• getTextFieldValue / setTextFieldValue
• getNumberFieldValue / setNumberFieldValue
• getBooleanFieldValue / setBooleanFieldValue
• setLookupFieldValue
• setUserFieldValue
• getRelatedListFieldValue / setRelatedListFieldValue

3. getUserProperties, getUserProfile → getUserProperties

Sintel Forms: getUserProperties, getUserProfile

Sintel Apps: getUserProperties. The API has been simplified to a single method.

const requesterEmail = getValue("Requester")?.emailAddress;

if (requesterEmail) {
    getUserProperties(requesterEmail).then(data => {
        setValue("Email", data.Mail);
        setValue("Manager", data.Manager);
    });
}

4. getFilteredFirstListItem, getFilteredListItems → getListItems

Sintel Forms: getFilteredFirstListItem, getFilteredListItems

Sintel Apps: getListItems. A single API method replaces the previous filtered list retrieval methods.

getListItems({
  listInternalName: "Projects",
  search: {
    value: "Yes",
    fieldInternalName: "Program",
    operator: "equals"
  },
  itemsLimit: 0,
  returnedFieldInternalNames: ["ID","Title"]
})
.then(result => {
  const mappedResult = result.map(item => ({
    id: +item.ID,
    value: item.Title
  }));
});

5. addCustomButton → addTopBarButton

Sintel Forms: addCustomButton

Sintel Apps: addTopBarButton

/**
 * Adds a custom button to the form's top bar.
 * @param label - The label of the button.
 * @param icon - The icon of the button (name of the [Font Awesome icon](https://fontawesome.com/icons)). Can be `undefined` for no icon.
 * @param action - The action to perform when the button is clicked. Can be:
 *                 - A string representing a URL to navigate to.
 *                 - An object with `url` and optional `target` properties for navigation.
 *                 - A callback function to execute custom logic.
 */
addTopBarButton: (
    label: string,
    icon: string | undefined,
    action: string | { url: string; target?: string } | (() => void),
) => void;

6. updateLookupValues → updateLookupOptions

Sintel Forms: updateLookupValues

Sintel Apps: updateLookupOptions

updateLookupOptions: (
    fieldInternalName: string,
    values: LookupValue[] | undefined,
    listInternalNameOrId?: string,
) => void;

Important: values require capital ID, e.g. {ID: 1, value: 'Option 1'};

For detailed examples of how to use the Sintel Apps Public JavaScript API within Logic rules, see Using the JavaScript API in Logic.