Storing and Fetching MetaData in Zimlets

If you want to set custom meta data for an item so you can do it by using withSetCustomMetaData and withGetCustomMetaData decorators. These decorators are using SetCustomMetadata and GetCustomMetadata SOAP API and has client side GraphQL implementation.

Use of withSetCustomMetaData decorator with a Component

Use withSetCustomMetaData decorator which trigger SetCustomMetadataRequest to set custom meta to an item.

import { withSetCustomMetaData } from '../../graphql-decorators/custom-metadata';

@withSetCustomMetaData() // This will provide you setCustomMetadata method in props to set custom meta
class FancyZimlet extends Component {
	handleClick = () => {
		this.props.setCustomMetadata({
			id: "1234", // Item id on which you want to set CustomMetaData,
			section: "zwc:sectionName", // Section name under which you want to set CustomMetaData
			attrs: [
				{
					key: "metaKey",
					value:"metaValue"
				},
				...
			]
		})
	}

	render() {
		return (
			<button onClick={this.handleClick} />
		)
	}
}

Use of withGetCustomMetaData decorator in a Component

Use withGetCustomMetaData decorator which trigger SetCustomMetadataRequest to get defined custom meta with an item.

import { withGetCustomMetaData } from '../../graphql-decorators/custom-metadata';
@withGetCustomMetaData({
    id: "1234" // Item id ,
    section: "zwc:sectionName" // Section name under which your meta being defined.
}, ({ data: { getCustomMetadata } }) => {
    const customMetaInfo = get(getCustomMetadata, 'meta.0._attrs');
    return {
        customMetaInfo
    }
})