<
Template Dev for ContentCreator, 2024.5-Beta
Template Dev for ContentCreator, 2024.5-Beta
Documentation

User documentation – Template Development for ContentCreator

Concept

The template development in ContentCreator primarily aims to help project developers in completing easy development tasks fast and comfortably from within ContentCreator.

This includes mainly small changes in forms, the modification of rules, or correction of errors in output channels.

The template development in ContentCreator does not replace the respective functionality in SiteArchitect. It is explicitely not meant to facilitate advanced development tasks like editing workflows or modelling database schemes.

Further reading:

Overview

Preview

You can access and edit the template of a page, section, or dataset in the toolbar:

Fullscreen view

You can access the fullscreen view of the template development in ContentCreator via the ContentCreator's main toolbar. In the fullscreen view you can create and move templates, manage folders, and edit all templates, including such that are not accessible in any preview (e.g. link templates, format templates).

If you have introduced change to a template you previously opened and have not yet saved the changes, the next template you open will appear in a new tab. This enables editing several templates simultaneously.

Media management

You can edit text files directly in the media management.

→ A window opens for editing the text file media. Here you can edit the file directly.

The editing of language-dependent text file media is also supported.

Editing templates

Developers can edit the following properties:

Actions

Form

In the Form area, you can create or edit forms. To do this, you can choose from three view types:

GOM UI only

Parallel view: GOM UI and XML editor

XML editor only

The selected view is being saved. The settings refer to the current server and is stored in the browser cache.

GOM-UI

In the GOM UI view or in the parallel GOM UI/XML editor view, you can select new input components from the Available components list on the left and input them using drag&drop into the form on the right, or move input components within the form:

In the GOM UI you can only edit the input components' titles:

  • In the parallel GOM UI/XML editor view, click on an input component.
    → In the XML editor, the XML area representing the input component is highlighted.

Default values

You can define and edit default values.

  • Fallback values are used as default values precisely when no value has been stored in the input component and a default value has not been defined for a language.
  • Default values can be defined per language.

Form preview

  • Click Open preview.
    → A pop-up opens. Here you can check the form resulting from the template and your changes before saving.

Auto completion in the XML editor

  • Press Ctrl+Space when editing a form or a rule.
    → Code suggestions with possible input components and definition tags display and can be selected.

Output channel

Emmet coding for HTML output channels and CSS media files

Emmet coding is a shorthand syntax for writing HTML and CSS quickly and efficiently. It allows developers to create code with less key strokes.

Example:

  • Press Ctrl+Space when editing an output channel.
    → Code suggestions with the FirstSpirit template language and HTML display and can be selected.

Result:

<ul id="nav">
 <li class="item1">
   <a href="">Item 1</a>
 </li> 
 <li class="item2">
   <a href="">Item 2</a>
 </li>
 <li class="item3">
   <a href="">Item 3</a>
 </li>
</ul>

Extend table templates

  • In the Mapping area, click Create new database column.
    → A pop-up opens where you can configure the column.

You can create a link to a form field, even if the form field has just been added:

  • In the Mapping area, click Create new database column.
  • In the Column type field select the String type.
  • In the field Form field select the component to which the column shall be linked.

To delete columns use the SiteArchitect.

Manage folders and templates

In the full-screen view, you can create, duplicate, and delete folders and templates.

You can only delete empty folder.
You can only delete templates if they are not in use.

You can move folders and templates in this view using drag&drop.

Opening references

  • Switch to the output channel.
  • Tap F3.
    Alternatively: Click on Jump to reference in the context menu.
    → If text file media are referenced, a window opens. Here, you can edit the file.

Search

In the full screen view you can perform a search in all templates:

  • The search does not differentiate between upper and lower case.
  • A full text search is performed. Only exact search terms display.
  • If a search result displays the search text within the template - form, rules or output channels - clicking on the search result opens the tab in which the search text occurs. The correct position displays in the tab. The search term is highlighted in color. All tabs in which the search text is present are highlighted in bold.

Integration with distributed template development

For FirstSpirit projects developed with Git using the Distributed template development, additional functionality is available: in the full-screen view, information on the current project, and links to Bamboo plans regarding the project display. When these Bamboo plans execute, the FirstSpirit project's status on the server synchronize with the project's status in the Git repository.

  • The Changes section displays information on the current project status in Git.
  • The Development & operations section displays links to the bamboo plans.

Version history

In the version history you can view and compare different versions of a template.

The versions display with information about their date and time of saving, the editor, and different status icons:

Initial version

Edited version

Restored version

Filtering

  • Activate the Display only own revisions checkbox.
    → Only versions saved by you display.

Compare different versions

Compare with current version

  • Click on a version.
    → The version is selected.
  • Click the Compare with latest version button. → A pop-up opens. The selected version and the current version display side by side. The differences between the versions are highlighted.

Comparing two versions

  • Click on a version.
    → The version is selected.
  • Click on a second version while pressing and holding Ctrl or Shift
    → The second version is selected.
  • Click Compare.
    → A pop-up opens. The selected versions display next to each other. The differences between the versions are highlighted.

To deselect a version, click on another version. Alternatively: Press and hold Ctrl and click on the same version again.
In the pop-up you will see only tabs that do have differences between the versions.
You cannot edit anything in the pop-up.

Restoring a version

  • Move the mouse over a version.
  • Click .
  • In the pop-up click Confirm.
    → The version moves to the first position in the history and receives the current timestamp.

You cannot undo restoring a version. Instead, you can restore another version that is more up-to-date than the version you have just restored.

Database queries

You can create and customize database queries in the ContentCreator.

Usage example: A database query is used to create two news overview pages with differing content that is dynamically retrieved. The query filters the "News" table for the "Company news" or "Industry news" category.

Creating new query

  • In the side menu of the Template development for ContentCreator click on Create new Query in a schema's context menu.

    Templates > Database Schemata > [schema name]
  • Select the result table and save the query.
    → The query appears under the name [schema name].[reference name] in the menu structure of the schema. The query opens immediately.

Editing a query

  • Select the required query in the side menu of the Template development for ContentCreator.
    Templates > Database schemata > [schema name]
    → The query opens.
  • In the Constraints tab you can view and edit the query in the graphical view Combination wizard.
  • In the Parameters tab you can define the values of parameters that are used in the Constraints tab.
  • In the Results tab you can view the query's results.
    Optional: Double-click a result to open its detailed view.
    Optional: Activate the Release state checkbox to limit the query's results: only published results appear.

In the Source code view in the Constraints tab you can edit the XML manually and thus have control over all of the query's settings.
The Combination wizard view helps to visualize and create simple database queries. If you need to create complex queries that cannot be displayed in the graphical view, do so directly in the Source code view.

Table of Contents