contentful - Adding installation parameters to a contentful App

Question

Struggling to find a working example or a document that explains how to set contentful app installation params. I can see how to get them from the SDK but settings them i cant.

any help is much appreciated.

Answer 1

Most likely your app has a Config Location which means you are building UI that will be shown to the user during and after installation of your app. In this location, there is an SDK method called sdk.app.onConfigure. This method takes a function which will return an object which is called targetState.

targetState documentation can be found here.

Let's take a React Config app as an example where we will set {foo: 'bar'} as our installation parameters:

export default class Config extends Component<ConfigProps, ConfigState> {
  constructor(props: ConfigProps) {
    super(props);
    // letting the SDK know we have a configuration function which will
    // return `targetState`
    props.sdk.app.onConfigure(() => this.onConfigure());
  }

  // This method will be called when a user clicks on "Install"
  // or "Save" on the configuration screen.
  onConfigure = async () => {
    // the object returned here is what Contentful calls `targetState`.
    // it is simply a configuration object set when the app is installed or updated
    return {
        parameters: { installation: { foo: 'bar' } }
    };
  };

In the example above, when a user hits "Install" or "Save" on the app's Config location, the installation parameter object of {foo: 'bar'} will be saved and can then be accessed in other app locations via the SDK.

On the off chance you are purely using the API to create or modify an AppInstallation, you can use the Content Management API to update the app's parameters as described in the documentation here.

Answer 2

Late answer but i also struggled with it. I found a tutorial here: https://dev.to/wiommi/how-i-built-a-contentful-app-combined-with-commerce-js-iii-33fo

They are added manually in ConfigScreen.tsx

You need to add them to your interface

export interface AppInstallationParameters {}

fx:

export interface AppInstallationParameters {
  apiKey?: string;
  projectId?: string;
}

And then set them manually with fx.

setParameters({ ...parameters, [PARAMETERNAME]: [PARAMETERVALUE] });