Skip to main content

Finished code

We provide a finished version of the custom integration that you can get running in your preferred environment.

Start web apps

This demo involves two web apps: Uniform configuration app and a demo app.

  1. Add the following permissions to your Uniform API key:

    Uniform Canvas > Compositions > Create
    Uniform Canvas > Compositions > Publish
    Uniform Canvas > Compositions > Update
    caution

    You should always assign the minimal permissions required to meet your requirements. Since this you are going to load configuration from a code repository into Uniform, you need permissions to write to Uniform.

    For more details on permissions, see the administrator guide.

  2. Enter the following commands:

    git clone https://github.com/uniformdev/examples
    cd examples
    cd examples/docs/custom-integrations/basic/nextjs/finished
  3. Set the variables in apps/demo-monsterpedia/.env to match the settings that apply to your Uniform project.

  4. Enter the following command:

    yarn
    caution

    For this tutorial you must use yarn to install the dependencies instead of npm.

  5. Enter the following command:

    yarn canvas:basic:push
  6. Enter the following command:

    yarn basic:dev

Register custom integration

  1. Follow the steps to register your custom integration.
  2. Assign the custom integration to your project.

Confirm use cases work

  1. In Uniform, navigate to Settings > Monsterpedia.

  2. Click Test.

    monsterpedia-settings-valid-endpoint
  3. Navigate to Canvas > Compositions.

  4. Click Home Page.

  5. Navigate to Landing Page > Dragon Details.

    dragon-details-parameters-finished
    info

    You will see that Ancient Gold Dragon is selected for the parameter Dragon. The dropdown list for this parameter is populated by a call to the API for the external system.

  6. Publish the composition.

  7. Open the demo app.

    demo-app-ancient-gold-dragon
    info

    You will see details about the selected dragon.