Custom Plugin Settings

Bugs
1

I am working on developing a custom plugin and the plugin has some settings so I can configure it. You can see the settings in the following code:

import { Builder } from "@builder.io/react";
import ComplexLink from "./components/ComplexLink";
import {
  pluginId,
} from './utils';

Builder.registerEditor({
  name: "ComplexLink",
  component: ComplexLink,
  inputs: [
    {
      name: 'defaultType',
      type: 'string',
      defaultValue: 'model'
    }

  ],
});

//  Register the plugin itself with Builder, to define plugin options that the input type will reference
Builder.register('plugin', {
  // id should match the name in package.json, which is why we grab it directly from the package.json
  id: pluginId,
  // will be used to prefix generated types
  name: 'cms-link-plugin',
  // a list of input definition that you might need to communicate with custom backend API
  settings: [
    {
      type: 'text',
      name: "apiKey",
      friendlyName: 'Builder API Key',
    },
    {
      type: 'boolean',
      advanced: true,
      name: "showDebug",
      friendlyName: 'Show Debug Info',
    },
    {
      type: 'text',
      advanced: true,
      name: "models",
      friendlyName: 'Models',
      helperText: 'Provide a comma separated list of models to use in the model selector',
    },
  ],
  // Modify the save button text
  ctaText: 'Save Changes',
  // If we need to make a request to validate anything:
  // async onSave(actions) {
  //   appState.dialogs.alert("Plugin settings saved.");
  // },
});

However, when I load this plugin and then go to the plugins page, I don’t see this plugin to edit it’s settings. I also don’t see alot of the other standard plugins that normally appear. If I remove the plugin from my space all of the other plugins reappear on the plugins page.

I have included a video of my issue:

Recording-20241211_094722.webm

Here is a link to my github repo for the code:

[GitHub - jhs129/complexlink-plugin]

My space id I am using is: 9d9c17771b684627bed7d61d5f05ef44

2

Hello @jhs129,

We’ve reviewed the issue, and it appears to be specific to your implementation. I was unable to replicate the problem with another custom plugin, but I can confirm the issue does occur with yours.

We’re actively investigating the cause of this unusual behavior and will keep you updated with any progress.

Thanks,

3

Hi @jhs129,

I just wanted to update you that we are still discussing the issue internally. Based on our initial investigation, we suspect the problem may be related to the plugin code, as we aren’t seeing the same issue with other plugins.

Rest assured, I’ll keep you informed and provide an update as soon as we determine why it’s causing the other plugins to disappear.

Best regards,

4

hi @manish, this is a consistent problem i am having with plugins at least in terms of not being able to get the plugin registration / settings to show up. Here are two plugins i have built where both don’t get the plugin settings:

These plugins have also been published to vercel at:
https://cmslink-plugin.vercel.app/plugin.system.js
https://bynder-builder-plugin.vercel.app/plugin.system.js

5

Hello @jhs129,

We’re looking into this! Could you share a screenshot of the error you’re encountering? That will help us compare it with the error we’re seeing on our end.

Thanks!

6

@manish-sharma

The issue is i don’t see anything with respect to the plugin settings. In the space with api key: 19ea4309187745989c31be6f73da25f8. I have 3 plugins installed, two of which that are custom as you see here:

image
image1632×846 87.7 KB

For both of these plugins, I have registered the plugin to have settings so we can set values for the plugin (i.e. api key of a space to query):

//  Register the plugin itself with Builder, to define plugin options that the input type will reference
Builder.register("plugin", {
  // id should match the name in package.json, which is why we grab it directly from the package.json
  id: pluginId,
  // will be used to prefix generated types
  name: "Bynder",
//  a list of input definition that you might need to communicate with custom backend API
  settings: [
    {
      type: 'text',
      name: BYNDER_URL,
      friendlyName: 'Portal Domain',
      defaultValue: "orlandohealth.getbynder.com",
      helperText: "Set a default Bynder Portal domain, eg: 'example.getbynder.com'",
    },
    {
      type: 'string',
      name: BYNDER_LANGUAGE,
      friendlyName: 'Portal Language',
      defaultValue: 'en_US',
      enum: SupportedLanguages,
      helperText: 'Select the language for the Bynder Portal',
    },
    // Advanced features, could be removed if AssetFieldSelection is not needed:
    {
      type: 'boolean',
      advanced: true,
      name: SHOW_ASSET_FIELD_SELECTION,
      friendlyName: 'Use Asset Field Selection',
    },
    {
      type: 'longText',
      advanced: true,
      name: ASSET_FIELD_SELECTION,
      friendlyName: 'Asset Field Selection',
      helperText: `Optional: GraphQL selection for asset fields, see https://developer-docs.bynder.com/ui-components`,
      showIf: `!!options.get('${SHOW_ASSET_FIELD_SELECTION}')`,
    },
  ],
  //Modify the save button text
  ctaText: "Save Changes",
  // If we need to make a request to validate anything:
  // async onSave(actions) {
  //   appState.dialogs.alert("Plugin settings saved.");
  // },
});

Once I enable this I should be able to go to the plugins page and update the settings but rather I don’t see my plugin nor candidly alot of other plugins that were available before i enabled the component:

image
image1697×904 92.3 KB