Skip to content

Next: Using Regions

russellhutsonmicro-p edited this page Dec 1, 2017 · 12 revisions

Using Regions in Cockpit Next

About Regions: https://getcockpit.com/documentation/modules/regions

Region Fields

Region fields allow you to easily change values, parameters and even whole sections of code within the Region Template.

Here's an example. I have a Region which builds a Bootstrap Carousel. Each slide in the carousel is taken from a CarouselSigns Collection. When someone wants to add a slide they add another entry to the collection. They don't need to touch the Carousel Region. But what if you want to change the speed of the carousel? This can be done by adding a Region Field, say, 'slidedelay':

Region Field

Region Field Config

And now you can use the value entered in the Template:

Using Field in Template

Region Field - Field Types

You can choose from a large number of field types when creating a Region Field:

  • access-list
  • asset
  • boolean
  • code
  • color
  • colortag
  • date
  • file
  • gallery
  • html
  • image
  • layout
  • layout-grid
  • location
  • markdown
  • multipleselect
  • object
  • password
  • rating
  • repeater link
  • select
  • set
  • tags
  • text
  • textarea
  • time
  • wysiwyg
  • collectionlink

Using Regions in your front end

You can fetch the contents of you Region using the REST API e.g. https://mydomain.com/cockpit/api/regions/get/myregionname?token=

I also find IntercoolerJS useful (http://intercoolerjs.org/) as you can fetch content declaritively, rather than programmatically using JS or jQuery. e.g.

<div ic-src="https://_mydomain.com_/cockpit/api/regions/get/_lateststockprice_?token=_<mytoken>_" ic-poll="5s">Your Region Will Appear Here</div>

Want to pass values in from your front or back end to tailor your Region? Read this

Want to fetch the Region fields just as JSON (and not the template)? Read this