Forum Discussion
3 Replies
- MattV20 days agoKhoros Staff
You can add properties to a component to allow simple configuration.
For example, the following component json:
{ "id" : "Announcement", "markupLanguage" : "HANDLEBARS", "defaults" : { "config" : { "applicablePages" : [ ], "description" : "", "fetchedContent" : null }, "props" : [ { "id" : "announcement_text", "dataType" : "STRING", "list" : false, "label" : "Announcement Text", "description" : "Announcement text to display", "control" : "INPUT" } ] }, "components" : [ { "id" : "custom.widget.Announcement" } ], "grouping" : "CUSTOM", "scriptGroups" : null, "aboutThis" : null }
Adds a simple input box to the component settings in designer where an Admin can add announcement text.
I handlebars, I access the text with {{component.props.announcement_text}} - wkennis15 days agoGuide
This is handy for adding titles or some small information used in layout and stuff.
But what about real HTML content with multiple lines to add lists, links and stuff?
- MattV15 days agoKhoros Staff
There is not any good OOB way to do that.
I had experimented with creating a Handlebars editor in React, and it is a bit complicated depending on how fancy you want to get.
I used the @monaco-editor/react package for the editor (monaco being the underlying editor used for VS Code). However, this isn't currently supported by the SDK (not an approved dependency), so this wouldn't work in production code for now.
Then there's a couple GraphQL queries/mutations you can use to get and save the components.
query GetComponents { components(markupLanguages: [HANDLEBARS], grouping: [CUSTOM]){ id template{ id style content defaults { config { applicablePages description } props { id } } components{ id } } } }
mutation SaveComponent($id: String!, $componentId: String!, $content: String!, $applicablePages: [ComponentPageScope!]!, $description: String!) { createOrUpdateComponentTemplate(templateInput:{ id: $id markupLanguage: HANDLEBARS content: $content defaults: { config:{ applicablePages: $applicablePages description: $description } props:[] } components:{ id: $componentId } grouping: CUSTOM }) { result { id content } errors { __typename ... on NoComponentsError { message fields } ... on InvalidComponentTemplateIdError { message fields } ... on NoDefaultComponentError { message fields } ... on ComponentTemplateContentCannotBeSavedError { message fields } ... on CreateOrUpdateComponentTemplateFailedError { message fields templateId } ... on ValidationError { message fields key } ... on Error { fields message } ... on ErrorWithArgs { fields message } } } }