コンテンツエクスプローラ - メタデータビューv1

function App() {
    const token = "<DEVELOPER_TOKEN>";
    const rootFolderID = "<ROOTFOLDER_ID>";
    const EID = "<ENTERPRISE_ID>";
    const templateName = "<METADATA_TEMPLATE_NAME>";
    const metadataSource = `enterprise_${EID}.${templateName}`;
    const metadataSourceFieldName = `metadata.${metadataSource}`;
    const metadataQuery = {
    	from: metadataSource,
    	query: "key = :arg1",
    	query_params: { arg1: "value" },
    	ancestor_folder_id: 0,
    	fields: [
        `${metadataSourceFieldName}.name`,
        `${metadataSourceFieldName}.last_contacted_at`,
        `${metadataSourceFieldName}.industry`,
        `${metadataSourceFieldName}.role`,
        ],
    };

    const fieldsToShow = [
    // canEdit propetry determines if the user can edit the metadata directly from Content Explorer component
    { key: `${metadataSourceFieldName}.name`, canEdit: false },
    // displayName alows to change the label on metadata column
    { key: `${metadataSourceFieldName}.industry`, canEdit: false, displayName: "alias" },
    { key: `${metadataSourceFieldName}.last_contacted_at`, canEdit: true },
    { key: `${metadataSourceFieldName}.role`, canEdit: true },
    ];

const defaultView = "metadata";
return (
    <IntlProvider locale="en">
        <div className="App">
            <header className="App-header">
                <h2>Metadata view in Content Explorer</h2>
            </header>
            <section>
                <div className="metadata-based-view">
                    <ContentExplorer
                        rootFolderId={rootFolderID}
                        token={token}
                        metadataQuery={metadataQuery}
                        fieldsToShow={fieldsToShow}
                        defaultView={defaultView}
                    />
                </div>
            </section>
        </div>
    </IntlProvider>
);
}

export default App;