Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Child pages (Children Display)

The Boomi API Control Plane offers two different approaches for customizing the Developer Portal. As you like it.
Of course, if you want to do something completely your own, you can. https://demo.backend.apiida.io/swagger-ui/index.html

Technology and Prerequisites

Language and Framework

We use in combination the framework Vue and the language Typescript. The team is completed with Tailwind. Here is an example:

Code Block
languagetypescript
<template>
  <button type="button" class="rounded bg-indigo-500 py-1 px-2 text-xs font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Button text</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    props: {
        // Type-Safe properties! 
        myComplexProperty: {
          type: Object as PropType<MyInterface>,
          required: true,
        }
    }, 
    emits: [],
    setup(props, { emit }) {

    },
})
</script>

<style scoped>

</style>

For storage we use Pinia.

Code Block
languagetypescript
import { defineStore } from 'pinia';
import Plan from '../types/configuration/Plan';

const planStore = defineStore({
  id: 'plan',
  state: () => ({
    plans: [] as Plan[],
  }),
});

export default planStore;

https://www.typescriptlang.org/ https://vuejs.org/ https://tailwindcss.com/ https://pinia.vuejs.org/ https://www.jetbrains.com/help/phpstorm/prettier.html https://prettier.io/ https://github.com/airbnb/javascript https://eslint.org/

Fork it!

https://github.com/apiida/obsidian-devportal https://docs.github.com/en/get-started/quickstart/fork-a-repo
In the README.dm you will find further instructions on how to start and configure your portal locally.:

  1. In-Platform Customization:

    1. You can use the content management system (CMS) of the existing developer portal to customize it for your requirements.

    2. To customize these elements, please follow this instructions section of the user-guide: Content Management System (CMS)

  2. Frontend Source-Code Access

    1. If you wish to go beyond the built-in customization options, we provide access to the corresponding GitHub project, allowing you to make further adjustments on your own.

    2. By accessing the GitHub project, you can modify the portal's layout according to your specific requirements.

    3. Therefore please refer to this documentation: Develop your own developer portal