Adding Text Properties for a Custom Handlebars Component

A guide for adding text properties to Handlebars Components.

To upload a text properties file for a component, you can either add a manual file or use a GraphQL mutation. Overrides to the core text keys go to the text/text/.json file (for example, text/text.en.properties).

New text keys added for a component are placed within the component’s directory in the text subdirectory.

For example, if you have added an English text properties file for the TopMembers component, it is placed in the components/TopMembers/text/text.en.json file.

Uploading a text properties file for a component via GraphQL

To upload a text properties file for a component, you run the mutation. This mutation must be a multipart/form-data request with a file attachment.

Here is an example cURL script that accomplishes this:

curl --location 'https://community.mine.com/t5/s/api/2.1/graphql' \
--header 'Authorization: Bearer r8iuFP51VSVMkBztKC7dqy40hFQQF66hV+pGotPHG8U=;' \
--header 'Content-Type: multipart/form-data' \
--form 'operations="{ \"query\": \"mutation($templateId: String!, $locale: Locale!, $assetPart: Upload!) { saveComponentTextAssetFromUpload(templateId:$templateId locale: $locale assetPart: $assetPart){result {name directoryName subDirectoryName feature size lastModified revision mimeType url } errors {...on Error { message fields }}}}\", \"variables\": {\"templateId\": \"TopMembers\", \"locale\": \"en\", \"assetPart\": null} }"' \
--form 'map="{\"file\":[\"variables.assetPart\"]}"' \
--form 'file=@"TopMembers.en.json"'

Adding a text properties file for a component manually

This diagram illustrates how to manually add text properties for a component.

For our example, we are going to add the following lines to the components/TopMembers/text/text.en.json file.

{
  "congrats": "Congratulations to the top active members in our community! Remember, everyone who participates in a winner in our books.",
  "firstPlace": "First Place Winner",
  "badge": "Image of a 1st place badge"
}