Custom App Development & Extensions

Using the DateTimePicker component in a custom extension may result in a missing input field or non-functional action buttons when manual integration is not performed. This prevents users from interacting with the picker or handling date and time values.

Root cause

The DateTimePicker component does not provide a native input field or automatic button handlers, requiring manual configuration and pairing with separate UI elements.

Resolution

1. Integrate a standard HTML input field manually into the extension code.
2. Configure the input field to trigger the DateTimePicker modal upon interaction.
3. Use separate DatePicker and TimePicker components if the application requires distinct date and time inputs.

After integrating the manual input field, click the field to verify the DateTimePicker modal opens.

If the onDone and onCancel buttons correctly process the input data, the manual integration is successful.

Developing a custom app using the Marketplace boilerplate may trigger an infinite loop of requests on the App Configuration page. This prevents the configuration UI from loading or functioning correctly.

Root cause

The installationData object is incorrectly included in the dependency array of a useEffect hook, causing the component to re-render and re-execute requests endlessly.

Resolution

1. Open the AppConfigurationExtensionProvider.tsx file in the boilerplate source code.
2. Locate the useEffect hook responsible for handling installation data or configuration requests.
3. Remove installationData from the hook's dependency array.
4. Redeploy the application to verify the fix.

After removing the dependency from the code, navigate to the App Configuration page of the custom app.

If the network tab shows a stable number of requests without an infinite loop, the render logic is corrected.

Integrating a DAM boilerplate app may result in syntax errors during initialization when the target origin is not properly configured. This prevents the app from communicating with the Contentstack UI.

Root cause

The application SDK uses a placeholder string for the target origin URL in its postMessage configuration, which the browser fails to validate as a legitimate domain.

Resolution

1. Open the source code where the @contentstack/ui-extensions-sdk is initialized.
2. Locate the configuration object or initialization function containing the target origin parameter.
3. Replace the placeholder text "YOUR CUSTOM FIELD DOMAIN URL" with the specific Contentstack app domain URL (e.g., app.contentstack.com).
4. Save the changes and rebuild the application.

After replacing the placeholder URL, open the DAM app within the Contentstack environment.

If the syntax error no longer appears in the console and the app loads correctly, the SDK is properly initialized.

Saving Global Field entries may fail with an error referencing a non-existent extension ID when specific experimental features are enabled. This prevents users from updating content model components.

Root cause

The error is caused by a known defect in the Nested Global Fields feature, which incorrectly attempts to reference internal extension IDs that do not exist in the stack.

Resolution

1. Navigate to the stack settings or contact support to access feature flags.
2. Locate the "Nested Global Fields" enablement setting.
3. Disable the feature to stop the system from referencing non-existent extension IDs.
4. Attempt to save the Global Field entry again.

After disabling the Nested Global Fields feature, open a Global Field and attempt to save a change.

If the "Failed to update" error no longer appears, the reference mismatch is resolved.

Using the ts-gen plugin with the GraphQL flag may return an "API not available" error in specific regions like Azure EU. This prevents the generation of TypeScript typings for regional stacks.

Root cause

The Contentstack CLI (csdx) defaults to the North American region unless explicitly configured, causing plugins to fail when communicating with regional endpoints.

Resolution

1. Open a terminal or command prompt where the Contentstack CLI is installed.
2. Execute the configuration command to set the region to your specific environment: csdx config:set:region AZURE-EU.
3. Re-run the ts-gen command with the --api-type graphql flag.

After setting the CLI region, execute the ts-gen command again for the regional stack.

If the TypeScript typings are generated without the region availability error, the CLI configuration is correct.

Creating a project using the Trados integration may fail if the "Create Project" button remains disabled or returns a "Project Creation failed. Item not found in a release" error. This prevents users from initiating the translation workflow through the plugin.

Root cause

The Trados plugin UI requires an existing release containing the source entries to satisfy validation requirements, even when a new release name is provided for the translated content.

Resolution

1. Create a release within the Contentstack stack.
2. Add all entries from the source locale intended for translation into the created release.
3. Navigate to the Trados plugin dashboard.
4. Select the release containing the source entries from the plugin dropdown menu.
5. Enter a unique name for the translated release in the "Create Release" field.

After creating the source release and selecting it in the plugin, verify that the "Create Project" button is enabled. If the project is created successfully, the issue is resolved.