Plugin SDK > Manual field extensions

1
import { connect, Field, ManualFieldExtensionsCtx, OverrideFieldExtensionsCtx } from 'datocms-plugin-sdk';
2

3
connect({
4
  manualFieldExtensions(ctx: ManualFieldExtensionsCtx) {
5
    return [
6
      {
7
        id: 'starRating',
8
        name: 'Star rating',
9
        type: 'editor',
10
        fieldTypes: ['integer'],
11
      },
12
    ];
13
  },
14
  overrideFieldExtensions(field: Field, ctx: OverrideFieldExtensionsCtx) {
15
    if (field.attributes.field_type === 'text') {
16
      return {
17
        addons: [{ id: 'loremIpsumGenerator' }],
18
      };
19
    }
20
  },
21
});

1
overrideFieldExtensions(field: Field, ctx: OverrideFieldExtensionsCtx) {
2
  // get the suffix from plugin configuration settings
3
  const { loremIpsumApiKeySuffix } = ctx.plugin.attributes.parameters;
4

5
  if (
6
    field.attributes.field_type === 'text' &&
7
    field.attributes.api_key.endsWith(loremIpsumApiKeySuffix)
8
  ) {
9
    return {
10
      addons: [
11
        { id: 'loremIpsumGenerator' },
12
      ],
13
    };
14
  }
15
}

1
import { connect, Field, ManualFieldExtensionsCtx, OverrideFieldExtensionsCtx } from 'datocms-plugin-sdk';
2

3
connect({
4
  manualFieldExtensions(ctx: ManualFieldExtensionsCtx) {
5
    const { autoApply } = ctx.plugin.attributes.parameters;
6

7
    if (autoApply) {
8
      return [];
9
    }
10

11
    return [
12
      {
13
        id: 'starRating',
14
        name: 'Star rating',
15
        type: 'editor',
16
        fieldTypes: ['integer'],
17
      },
18
      {
19
        id: 'loremIpsumGenerator',
20
        name: 'Lorem Ipsum generator',
21
        type: 'addon',
22
        fieldTypes: ['text'],
23
      },
24
    ];
25
  },
26
  overrideFieldExtensions(field: Field, ctx: OverrideFieldExtensionsCtx) {
27
    const { autoApply } = ctx.plugin.attributes.parameters;
28

29
    if (!autoApply) {
30
      return;
31
    }
32

33
    if (field.attributes.field_type === 'text') {
34
      return {
35
        addons: [{ id: 'loremIpsumGenerator' }],
36
      };
37
    }
38

39
    if (
40
      field.attributes.field_type === 'integer' &&
41
      field.attributes.api_key === 'rating'
42
    ) {
43
      return {
44
        editor: { id: 'starRating' },
45
      };
46
    }
47
  },
48
});

1
import { connect, Field, ManualFieldExtensionsCtx } from 'datocms-plugin-sdk';
2

3
connect({
4
  manualFieldExtensions(ctx: ManualFieldExtensionsCtx) {
5
    return [
6
      {
7
        id: 'starRating',
8
        name: 'Star rating',
9
        type: 'editor',
10
        fieldTypes: ['integer'],
11
        configurable: true,
12
      },
13
    ];
14
  },
15
});

1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import {
4
  connect,
5
  RenderManualFieldExtensionConfigScreenCtx,
6
} from 'datocms-plugin-sdk';
7

8
connect({
9
  renderManualFieldExtensionConfigScreen(
10
    fieldExtensionId: string,
11
    ctx: RenderManualFieldExtensionConfigScreenCtx,
12
  ) {
13
    ReactDOM.render(
14
      <React.StrictMode>
15
        <StarRatingConfigScreen ctx={ctx} />
16
      </React.StrictMode>,
17
      document.getElementById('root'),
18
    );
19
  },
20
});

1
import { RenderManualFieldExtensionConfigScreenCtx } from 'datocms-plugin-sdk';
2
import { Canvas, Form, TextField } from 'datocms-react-ui';
3
import { CSSProperties, useCallback, useState } from 'react';
4

5
type PropTypes = {
6
  ctx: RenderManualFieldExtensionConfigScreenCtx;
7
};
8

9
// this is how we want to save our settings
10
type Parameters = {
11
  maxRating: number;
12
  starsColor: NonNullable<CSSProperties['color']>;
13
};
14

15
function StarRatingConfigScreen({ ctx }: PropTypes) {
16
  const [formValues, setFormValues] = useState<Partial<Parameters>>(
17
    ctx.parameters,
18
  );
19

20
  const update = useCallback((field, value) => {
21
    const newParameters = { ...formValues, [field]: value };
22
    setFormValues(newParameters);
23
    ctx.setParameters(newParameters);
24
  }, [formValues, setFormValues, ctx.setParameters]);
25

26
  return (
27
    <Canvas ctx={ctx}>
28
      <Form>
29
        <TextField
30
          id="maxRating"
31
          name="maxRating"
32
          label="Maximum rating"
33
          required
34
          value={formValues.maxRating}
35
          onChange={update.bind(null, 'maxRating')}
36
        />
37
        <TextField
38
          id="starsColor"
39
          name="starsColor"
40
          label="Stars color"
41
          required
42
          value={formValues.starsColor}
43
          onChange={update.bind(null, 'starsColor')}
44
        />
45
      </Form>
46
    </Canvas>
47
  );
48
}

1
const isValidCSSColor = (strColor: string) => {
2
  const s = new Option().style;
3
  s.color = strColor;
4
  return s.color !== '';
5
};
6

7
connect({
8
  validateManualFieldExtensionParameters(
9
    fieldExtensionId: string,
10
    parameters: Record<string, any>,
11
  ) {
12
    const errors: Record<string, string> = {};
13

14
    if (
15
      isNaN(parseInt(parameters.maxRating)) ||
16
      parameters.maxRating < 2 ||
17
      parameters.maxRating > 10
18
    ) {
19
      errors.maxRating = 'Rating must be between 2 and 10!';
20
    }
21

22
    if (!parameters.starsColor || !isValidCSSColor(parameters.starsColor)) {
23
      errors.starsColor = 'Invalid CSS color!';
24
    }
25

26
    return errors;
27
  },
28
});

1
function StarRatingParametersForm({ ctx }: PropTypes) {
2
  const errors = ctx.errors as Partial<Record<string, string>>;
3

4
  // ...
5

6
  return (
7
    <Canvas ctx={ctx}>
8
      <TextField
9
          id="maxRating"
10
          /* ... */
11
          error={errors.maxRating}
12
        />
13
        <TextField
14
          id="starsColor"
15
          /* ... */
16
          error={errors.starsColor}
17
        />
18
    </Canvas>
19
  );
20
}

1
import ReactStars from 'react-rating-stars-component';
2

3
function StarRatingEditor({ ctx }: PropTypes) {
4
  // ...
5

6
  return (
7
    <ReactStars
8
      /* ... */
9
      count={ctx.parameters.maxRating}
10
      activeColor={ctx.parameters.starsColor}
11
    />
12
  );
13
}