Forum Discussion

wkennis's avatar
wkennis
Guide
21 days ago

editable content in react or handlebars component

Is it possible to make components content editable in the designer?

I want to create a component with a specific layout that the moderator can easily change in the designer. This way a developer isn't always needed to do a text change.

3 Replies

  • MattV's avatar
    MattV
    Khoros Staff
    20 days ago

    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}}

  • 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?

  • MattV's avatar
    MattV
    Khoros Staff
    15 days ago

    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
    			}
    		}
    		
    	}
    }