APIコール

APIファイル構成

src/api ├─ account.js # ユーザー情報のインターフェース ├─ appManagement.js # アプリケーション情報のインターフェース ├─ global.js # グローバル情報のインターフェース ├─ homeApp.js # ホーム画面上のアプリ関連インターフェース └─ worksheet.js # ワークシート関連インターフェース

src/pages/workflow/api ├─ instance.js # ワークフロー内の承認関連インターフェース └─ instanceVersion.js # ワークフロー内のリスト（未処理、要記入など）関連インターフェース

例：src/api フォルダ内の worksheet.js ファイルについて

ワークシートからデータをリクエストし、表示する方法を以下に示します。

フロントエンドページの追加に戻り、追加したページコンポーネントを開きます。

ヘッダー部において、worksheetのAPIファイルをインポートしてください。

import api from 'src/api/worksheet';

コンポーネント内でデータリクエストとデータ表示のコードを追加します。

const Con = styled.div`
  width: 100%;
  height: 100%;
  padding: 20px;
`;
const Title = styled.div`
  font-size: 30px;
  color: #666;
  margin: 10px;
`;
const ViewTabs = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
`;
const ViewTab = styled.div`
  text-align: center;
  background: #fff;
  border-radius: 6px;
  margin: 10px;
  line-height: 100px;
  color: #888;
  box-shadow: 3px 3px 6px rgb(0, 0, 0, 0.1);
`;

export default function Hello(props) {
  const [info, setInfo] = useState({views: []});
  useEffect(() => {
    const worksheetId = location.pathname.match(/^\/custom\/hello\/(\w+)/)[1];
    api.getWorksheetInfo({worksheetId, getViews: true}).then(setInfo);
  }, []);
  return (
    <Con>
      <Title>{info.name}</Title>
      <ViewTabs>
        {info.views.map((v) => (
          <ViewTab>{v.name}</ViewTab>
        ))}
      </ViewTabs>
    </Con>
  );
}

http://localhost:30001/custom/hello/{ワークシートID} にアクセスします。