useUiModificationsApi

useUiModificationsApi is used to modify the values of team forms and needs to be used in conjunction with the proxima:uiModifications module.

Usage

The useUiModificationsApi method includes three methods: onInit, onChange, and onFocus.

onInit

As shown in the code below, when the item creation/edit modal or item view page is initially loaded, if the interface includes a priority field, the callback code in onInit will be executed to modify the title.

import React, { useEffect } from "react";
import { useUiModificationsApi } from "@giteeteam/plugin-sdk";

const Demo = (props) => {
  const { onInit } = useUiModificationsApi();

  useEffect(() => {
    onInit(
      async ({ api, context, formData }) => {
        const nameField = api.getFieldByKey("name");
        if (nameField) {
          console.log("name", nameField.getValue());
          nameField.setValue(`This is title：${Date.now()}`);
        }
      },
      () => {
        return {
          fields: ["priority"], // Listen to the priority field
        };
      }
    );
  }, [])

  return <div></div>;
};

export default Demo;

onChange

As shown in the code below, when the priority field is modified, the callback code in onChange will be executed to modify the title.

import React, { useEffect } from "react";
import { useUiModificationsApi } from "@giteeteam/plugin-sdk";

const Demo = (props) => {
  const { onChange } = useUiModificationsApi();

  useEffect(() => {
    onChange(
      async ({ api, context, change }) => {
        const nameField = api.getFieldByKey("name");
        if (nameField) {
          console.log("name", nameField.getValue());
          nameField.setValue(`This is title：${Date.now()}, priority has been changed to${change.value}`);
        }
      },
      () => {
        return {
          fields: ["priority"], // Listen to the priority field
        };
      }
    );
  }, [])

  return <div></div>;
};

export default Demo;

onFocus

The following code will be triggered when the field gains focus, thereby setting the data of the options.

import React, { useEffect } from "react";
import { useUiModificationsApi } from "@giteeteam/plugin-sdk";

const Demo = (props) => {
  const { onFocus } = useUiModificationsApi();

  useEffect(() => {
    onFocus(
      async ({ api, context, formData, focus }) => {
        const searchData = api.getSearchData() ?? {}; // get search keyword
        const data = await fetch(); // You can fetch data from third-party interfaces.
        const field = api.getFieldByKey(focus.fieldKey);
        field?.setFieldOptions(data);
      },
      () => {
        return {
          fields: ["priority"], // Listen to the priority field
        };
      }
    );
  }, [])

  return <div></div>;
};

export default Demo;