First steps with a new cartridge

This section describes how to define a new cartridge and use Workbench to configure it to appear on a page.

To create and configure a basic "Hello, World" cartridge, follow these steps:

  1. Navigate to the templates directory of your application, and create a subdirectory named "HelloWorld." This directory name is the template ID for your template.

    For example: C:\Endeca\apps\Discover\config\import\templates\HelloWorld.

  2. Create a cartridge template JSON file.

    1. Open a new plain text file.

    2. Type or copy the following into the contents of the file: 

      {
    "ecr:type": "template",
    "@group": "SecondaryContent",
    "@description": "A sample cartridge that can display a simple message",
    "@thumbnailUrl": "thumbnail.jpg",
    "defaultContentItem": {
        "@name": "Hello cartridge",
        "message": "",
        "messageColor": ""
     },
    "editorPanel": {
        "editor": "editors/DefaultEditorPanel",
        "children": [
		    {
                "editor": "GroupLabel",
                "label": "${group.contents.label}"
            },
            {
                "editor": "editors/StringEditor",
                "propertyName": "message",
                "label": "Message"
                },
            {
                "editor": "editors/StringEditor",
                "propertyName": "messageColor",
                "label": "Color"
            }
        ]
    },
    "typeInfo": {
        "message": {"@propertyType": "String"},
        "messageColor": {"@propertyType": "String"}
    }
}

    3. Save the file with the name _.json in the HelloWorld directory of your Discover Electronics application, for example: C:\Endeca\apps\Discover\config\import\templates\HelloWorld.

  3. Upload the template to Workbench.

    1. Open a command prompt and navigate to the control directory of your deployed application, for example, C:\Endeca\apps\Discover\control.

    2. Run the set_templates command. 

      C:\Endeca\apps\Discover\control>set_templates.bat
Removing existing cartridge templates for Discover
Setting new cartridge templates for Discover
Finished setting templates

C:\Endeca\apps\Discover\control>

  4. Add the cartridge to a page.

    1. Open Workbench in a Web browser.

      The default URL for Workbench is http://<workbench-host>:8006.

    2. From the launch page, select Experience Manager.

    3. In the tree on the left, select Search and Navigation Pages under the Content section, then select the Default Page.

    4. In the Edit Pane on the right, select the right column section from the Content Tree.

    5. Click Add.

      The cartridge selector dialog displays.

    6. Select the Hello cartridge and click OK.

    7. Select the new Hello cartridge from the Content Tree on the left and configure the color as #FF00000.

    8. Click Save Changes.

  5. Try to view the cartridge in the Discover Electronics application.

    1. In a Web browser, navigate to http://<workbench-host>:8006/discover-authoring/.

      An error displays because we have not yet created a renderer for the Hello cartridge.

The following shows the JSON representation of the page with most of the tree collapsed, highlighting the data for the cartridge that we just added. 

{
    "workflowState": "ACTIVE",
    "ecr:lastModifiedBy": "admin",
    "ecr:lastModified": "2016-09-12T13:38:32.258+05:30",
    "priority": 100,
    "ecr:createDate": "2016-09-12T13:38:32.258+05:30",
    "ecr:type": "content-item",
    "contentItem": {
        "@name": "Three-Column Page",
        "metaKeywords": "camera cameras electronics",
        "@type": "ThreeColumnPage",
        "title": "Discover Electronics",
        "metaDescription": "Oracle Commerce reference application.",
        "redirectGroup": "",
        "headerContent":{...},
        "leftContent": {...},
        "mainContent": {...},
        "rightContent":[
                { … },
                { … },
                {
                     "@name": "Hello World",
                         "@type": "HelloWorld",
                         "message": "Hello, World",
                         "messageColor": "#FF0000"
                }
            ]
        }
    ],
    …

}

In the next section, we'll create a simple renderer that displays the message based on the values configured in Experience Manager.

Copyright © Legal Notices