Thinking in sections

To configure Ninetails for your CMS, you must define Sections, Elements, and Properties. Let's look at what each one means first. Imagine we were going to model the following section from izettle.com:

At the highest level, we have two sections here; the navigation bar at the top, and a billboard beneath it:

Lets concentrate on the billboard section now. It has a bunch of elements:

Each of those elements has properties. The Headline element can use a very simple Text property which just contains a string. The Background element needs an Image property which will have the image src, and an alt tag. The Card icons will be similar to the Background element, but will use an array of Image properties. Finally, the SignupButton will need a Link property which will have text for the link, a title attribute, and a url for the link to point to.

Setting up Sections, Elements, and Properties

Let's build up the Section, Elements, and Properties from the examples above from the bottom up. These will live in app/components/section, app/components/elements, and app/components/properties.

Properties

# app/components/properties/text.rb
module Property
  class Text < Ninetails::Property
    property :text, String
  end
end

# app/components/properties/image.rb
module Property
  class Image < Ninetails::Property
    property :src, String
    property :alt, String
  end
end

# app/components/properties/link.rb
module Property
  class Link < Ninetails::Property
    property :url, String
    property :title, String
    property :text, String
  end
end

Elements

# app/components/elements/text.rb
module Element
  class Text < Ninetails::Element
    property :content, Property::Text
  end
end

# app/components/elements/text.rb
module Element
  class Button < Ninetails::Element
    property :link, Property::Link
  end
end

# app/components/elements/figure.rb
module Element
  class Figure < Ninetails::Element
    property :image, Property::Image
  end
end

Sections

The sections pull it all together:

module Section
  class Billboard < Ninetails::Section
    located_in :body

    has_element :title, Element::Text
    has_element :background_image, Element::Figure
    has_element :signup_button, Element::Button

    has_many_elements :supported_card_icons, Element::Figure
  end
end

Looking at the result of your Section

Assuming you have Ninetails mounted at "/api" on your application, you can now list the sections which you have configured at "/api/sections". You you load up "/api/sections/Billboard", you should now be able to see an empty JSON structure for the section you just setup. It should look something like this:

{
  "name": "",
  "type": "Billboard",
  "tags": {
    "position": "body"
  },
  "elements": {
    "title": {
      "type": "Text",
      "reference": "a3087414-b1d3-459a-8cd1-bb1d502e9345",
      "content": {
        "text": ""
      }
    },
    "background_image": {
      "type": "Figure",
      "reference": "85556d83-6212-453f-8e5b-6fbcd8f72237",
      "image": {
        "src": "",
        "alt": ""
      }
    },
    "signup_button": {
      "type": "Button",
      "reference": "c9557fa1-5dc9-462f-9dc7-8ff05c65db2b",
      "link": {
        "url": "",
        "title": "",
        "text": ""
      }
    },
    "supported_card_icons": [
      {
        "type": "Figure",
        "reference": "33c01aab-94f9-4217-8f57-aa9add7ed73f",
        "image": {
          "src": "",
          "alt": ""
        }
      }
    ]
  }
}