WebPerformer V2.5.2 でカスタムUI部品を作成する

2023-08-15

はじめに

こんにちは。エヌデーデー島村です。
WebPerformer V2.5 で 追加された「UIエディタ」ですが、WebPerformer V2.5.2 では「UIエディタ」で使用できる「カスタムUI部品」という機能が追加されたので早速使ってみました。
今時のちょっと凝った画面を作るのに良さそうです。

SPAアプリケーションの作成

UIエディタ使用したアプリケーションを作るには、まず、WebPerformer のアプリケーションを SPA モードで作成する必要があります。
プロジェクトを右クリックして、[新規]>[新規アプリケーション]を選択します。
新規UIのダイアログが表示されるのでアプリケーションタイプで「SPA」を選択します。

カスタムUI部品の概要

カスタムUI部品を作成することで、標準部品にはない画面機能を実装することができます。
Reactで作成されたカスタムUI部品をUI定義で利用することができます。

カスタムUI部品の定義

カスタムUI部品はJavaScript形式で定義し、ファイル名をdefinition.jsとする必要があります。
カスタムUI部品の情報を定義した部品定義オブジェクトを戻り値とするJavaScript関数を記述します。
下記の例では、アイコンをクリックすることで表示/非表示を切り替えることができるパスワード用のフィールドを定義しています。

function PasswordField() {
  return {
    key: 'password-mask',
    name: 'カスタムパスワード',
    extends: 'CustomComponent',
    handlers: {
      onMaskClick: {
        action: 'maskClickAction',
      },
    },
    actions: {
      maskClickAction: {
        name: 'パスワードのマスク変更',
      },
    },
    editSetting: {
      defaults: {
        customProps: {
          mask: true
      },
      dataType: 'ANY'
      },
    },
    generator: {
      dependencies: { '@material-ui/core': '4.9.9', '@material-ui/icons': '4.9.1' },
      imports: [
      {
        import: ['forwardRef', 'useState', 'useCallback'],
        from: 'react'
      },
      {
        import: 'InputAdornment',
        from: '@material-ui/core/InputAdornment',
      },
      {
        import: 'IconButton',
        from: '@material-ui/core/IconButton'
      },
      {
        import: 'TextField',
        from: '@material-ui/core/TextField'
      },
      {
        import: 'VisibilityIcon',
        from: '@material-ui/icons/Visibility',
      },
      {
        import: 'VisibilityOffIcon',
        from: '@material-ui/icons/VisibilityOff',
      },
      ],
      source: `
      forwardRef(function (props: any, ref: any) {
        const {
	      width,
	      height,
	      margin,
          customProps,
          onMaskClick,
          onCommit
        } = props,
        [mask, setMask] = useState(customProps.mask),
        onBlur = useCallback(() => onCommit(), [onCommit]);
        return (
          <TextField
          id="password-input"
          label="Password"
          type={mask ? 'password' : 'text'}
          autoComplete="current-password"
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <IconButton edge="end" onClick={() => {
                  const nextMask = !mask;
                  setMask(nextMask);
                  if (onMaskClick) {
                  onMaskClick(nextMask);
                  }
                }}>
                  {mask ? <VisibilityIcon /> : <VisibilityOffIcon />}
                </IconButton>
              </InputAdornment>
            ),
          }}
          inputProps={{
            maxLength: 10,
          }}
          style={{
            width,
            height,
            margin
          }}
          onBlur={onBlur}
          />
        );
      })`,
    },
  };
}

カスタムUI部品定義を指定のディレクトリに配置

定義したカスタムUI部品は以下の指定されたディレクトリに配置する必要があります。
WebPerformerプロジェクト/ui-component/definitions/{key}/
※ {key}にはカスタムUI部品の定義のkey:に設定した値が入ります。

カスタムUI部品の配置

定義したカスタムUI部品はパレットに表示されます。ドラッグ&ドロップまたはクリックすることで、UI部品をレイアウトキャンバス上に配置できます。

プレビューの表示

まとめ

V2.5.2の新機能であるカスタムUI部品を作成することで標準部品のみでは実装できない、自由度の高い実装ができるのではないでしょうか。