Written by The Jahia Team
   Estimated reading time:

How to create a Component Node

In the node type creation pop-up window there are fields for the following node properties:

  • The namespace of the node type
  • The technical name of the node type (e.g. myComponent)
  • The title (user friendly name) of the node type (e.g. "My First Component")
  • The super type (Most node types inherit from jnt:content)
  • A list of mixins (e.g. jmix:basicContent)

new-component-create.png

Component Properties

When the new type is declared, properties can be added by name and type.

Simple properties can be of type : 

String
Long
Double
Boolean

Weakreference: reference to a node in the JCR

In the "Properties" tab of the node type creation pop-up window, the "add" button can be clicked. In the following example, a new property of type String is being created:

component-prop-create.png

Property Options

Jahia uses definitions to build the Edit and Contribute user interfaces. The Propety editting forms are rendered based on the property type. However, the form can be configured with a Selector. The standard syntax is as follows:

property_name (type, selector [options])

Examples:

field-name (string)
  • Displays a simple text field (input text)
field-name (string, richtext)
  • Displays a WYSIWYG HTML editor
field-name (string, choicelist)
  • Displays a drop down list
field-name (long)
  • Displays a number text field
field-name (boolean)
  • Displays a checkbox
field-name (weakreference, picker [type = 'image'])
  • Displays a node picker which only allows selection of an image file
field-name (date, datepicker)
  • Displays a calendar without hour in day
field-name (weakreference) < mynt:SomeOtherComponent
  • Display only content of type mynt:SomeOtherComponent

In Jahia Studio, a Property of type date could be added, with a Selector type of datepicker

property-date-picker.png

 

An example of adding a property for a Photo with the image selector option:

property-weakreference.png

A property with a constraint on its type:

choicelist-component-constraint.png

Adding a Component to a Page

Switching to Edit Mode, the new Component appears in the left panel under the "Components" tab.

Components are dragged-and-dropped to an area on a page. Once the title is added an error message appears:

no render set for node : my-first-component
for types : [mynt:myComponent]

new-component-add.png

Rendering will be covered in a later section.

Exercise: Create and enable a new Component

  1. Create the definition for an Employee of Acme Company.  
  2. Assign the Employee under a new unique Namespace.
  3. Categorize the Component as standard Jahia content containing an ACL, metadata, etc.
  4. Add the following Component properties:
    • First Name
    • Last Name
  5. Put the Component in the category “Content: structured” 
  6. Create a website and enable the Component on it.
  7. Create an Employee content item in Edit Mode.

If done correctly, the following message will be displayed:

No render set for node : employee for types : [mynt:employee]