Template Wizard – Overview

Tab (1):

• Overview:
  The “Overview” tab shows all the content that has been imported into the Template Wizard to date. Initially, this content is only present in the import project that was created in the Template Wizard previously (see Preparatory tasks). The edited content can then be transferred from this import project into the FirstSpirit project.
• Log:
  The “Log” tab shows all the project events, such as details of the operations for transferring external content into the import project as well as those for importing edited content into the FirstSpirit project. Valuable bug fixing information can be obtained by analyzing this log.
• Settings:
  The Settings tab can be used to configure further input components for creating forms and parameters for HTTP authorization. The Template Wizard already features three commonly used input components that have been preconfigured for plain text, formatted text, and images. However, it is possible to add other FirstSpirit standard components as well as project-specific components.
  See “Creating forms” for more information.

Tool bar for editing the entries (2):

The tool bar on the left-hand side of the Template Wizard can be used to add content to the import project and to edit this content:

• Select HTML file: Use this to add external HTML structures from the root directory of the file system or via a URL .
• Edit entry: Use this to open the preview for an imported HTML document. Within the preview, it is possible to assign individual subareas of the HTML structure to FirstSpirit templates and to identify form modules for these templates (see Analyzing the HTML structure).
• Scan Links...: An imported HTML structure contains references to (simultaneously supplied) images and files or to external references. This content is automatically transferred to the import project when an HTML structure is added. If HTML content is removed from the project, the references can be purged by clicking this button. The (old) references must be removed first and then the references can be detected again via this button.
• Remove selected row: Once imported, elements can be removed from the overview by clicking this button. Multiple elements can be selected by keeping the Ctrl or Shift key pressed at the same time. The process of deleting elements cannot be undone. Although HTML structures can be reimported, all the FirstSpirit templates that were based on the deleted HTML structure will have been deleted at the same time. Any media and files that have been removed can be transferred back into the import project by clicking the “Scan links” button, provided that they are still referenced by an HTML structure within the project.
• Exclude selected rows: Instead of having to remove content directly from the import project, you can simply exclude it so that it is not imported into the FirstSpirit project in the first place. This content can be easily included at a later point and imported into the FirstSpirit project. When you exclude an element, all the information in the import project that has been created on the basis of this element is retained (provided that the project has been saved). Excluded content can be reincorporated into the import project by clicking the button again. Individual elements can also be excluded or included via the “Exclude” checkbox next to an entry.
• Go to element: If the FirstSpirit project already contains elements with the displayed UID (field: “Name”) – e.g., due to a previous import operation – these elements can be selected in the Template Wizard overview and displayed in the FirstSpirit project by clicking the “Go to element” button (navigation and workspace). The button is disabled for any elements that are not yet present within the FirstSpirit project.
• Compare/Merge changes: This opens the “Version comparison” dialog. The icon is only active if the Template Wizard detects changes between the import project and the imported content in the FirstSpirit project (i.e., if the FirstSpirit status of the element has changed). This dialog can also be called up using the keyboard shortcut Ctrl+D (see Detecting and merging changes).
• HTML Compare/Merge changes: Opens the “Version comparison dialog”. The icon is only active if the Template Wizard detects changes to imported content compared with the data in the local root directory (i.e., if the HTML status of the object changes). (Even content that has been added via an external source is stored internally within the file system.) This dialog can also be called up with the keyboard shortcut Ctrl+Shift+D (see Detecting and merging changes).
• Browse base directory: This button opens the local root directory for the import project. This directory was defined as a “source” for the imported content when creating the import project (see Create import project). Updated HTML mockups supplied by the agency are saved in this directory. The Template Wizard detects these changes, updates the import project, and changes the HTML status of the affected elements.

Tool bar for editing the import project (3) and the import button (4):

The tool bar on the top right-hand side of the Template Wizard can be used to create, open, save, and delete import projects:

• Create or load an import project: Click this button to open the start dialog box of the Template Wizard. Here, you can either create a new import project or open an existing one (see Preparatory tasks).
• Save project: Click this button to open the “Save project” dialog. This dialog displays the name and description of the project that is currently open. Both the name and the description can be changed here if required. Click “OK” to save the content of the import project (under the specified name). The saved project remains open in the Template Wizard.
• Delete import project: Click this button to open the “Delete import project” dialog. Here, you can select one or more projects from the list of import projects and delete them by clicking “OK”.
  This action cannot be undone. All the content of the project is deleted!
  There are no version control or backup procedures in place for import projects (unlike for FirstSpirit projects).
• Import (4): Click this button to start importing between the import project and the FirstSpirit project. The current versions of the elements in the import project are imported into the FirstSpirit project. During this process, templates and form components are transferred into the FirstSpirit template store and referenced images and files are transferred into the FirstSpirit media store.
  

Structure view of the elements in the import project (5):

External HTML structures are displayed in the Template Wizard under the Templates node. By default, these are created using the “PAGE_TEMPLATE” type when the HTML structure is transferred. If content areas, section templates, and input components are defined in the course of further editing, they are hierarchically subordinate to the initial page template.

Any images and files that are referenced within the HTML structure are created under the Pictures and Files nodes. These files are created automatically when the HTML structure is added (provided that they are present in the root directory).

The structures in this view can be collapsed and expanded as required.

Status: There are two status values for each element in the import project:

The HTML status indicates the status of the element from the perspective of the local file system. (Even content that has been added via an external source is stored internally within the file system.) This status is represented by the icon next to the entry. The chart below shows what the information looks like in the detail view:

• New: The element is a new addition to the local file system.
  
• Changed: The element has been modified in the local file system.
  
• Deleted: The element has been deleted from the local file system or has been renamed.
  
• Error: An error occurred while importing the element. Error information can be requested by clicking the icon or the node type label (see also Bug fixing in the Template Wizard).

The FirstSpirit status indicates the status of the element from the perspective of the FirstSpirit project. This status is represented by the font color of the element concerned. The chart below shows what the information looks like in the detail view:

• : Status: “new” (font color: green, formatting: bold). The element has never before been imported into the FirstSpirit project or has since been deleted from the FirstSpirit project.
  
• : Status: “changed” (font color: red, formatting: bold). The element was already imported into the FirstSpirit project but then changed in the import project (not in the design deliverable). This status arises, for example, if the display name of the element changes or if the “language-dependent” attribute is set for the element. To accept these changes, the element should be imported again.
• : Status: “conflict” (font color: red, formatting: bold). This status is applied to elements if the UID (unique identifier) of the element concerned already exists within the project. The following principle applies: If the project already contains an element with this UID and the element is of the same type, the content in the FirstSpirit project is overwritten during the import operation, but no conflict is indicated. This is necessary for the purpose of performing updates within the project. However, if the project contains an element with this UID but it is of a different type, the “conflict” status is indicated
  

Information concerning the current status of an element is also displayed in the detail view (6).

Name / UID: All the content of the import project is listed here by name or UID (“unique identifier”). It is under this name that the elements are also transferred into the FirstSpirit project during import.

An element is always identified by means of its UID and its type. If the FirstSpirit project already contains elements with this UID and they are of the same type, the elements are overwritten in the project with the variant from the Template Wizard (for more information, see details of the “Conflicted” status).

Type: Element node type. Initially, all external HTML structures are created as a FirstSpirit page template (“PAGE_TEMPLATE”). However, only the HTML structures are transferred to the relevant template set at this early stage. It is only in the course of further editing (i.e., when the relevant content areas, section templates, and input components are defined under this page template) that the element becomes a FirstSpirit template with the corresponding form definition and necessary FirstSpirit template syntax. Any images and files referenced within the HTML structure are created using the “MediaMapping” type and are imported into the FirstSpirit media store during the import operation. Currently, the Template Wizard distinguishes between the following mapping types:

• PAGE_TEMPLATE: Imported as a FirstSpirit page template
• BODY: Imported as a content area of a FirstSpirit page template
• SECTION_TEMPLATE: Imported as a FirstSpirit section template
• LINK_TEMPLATE: Imported as a FirstSpirit link template
• RENDER_TEMPLATE: Imported as a FirstSpirit format template
• INPUT_COMPONENT: Imported as an input component in the form area of a FirstSpirit template
• MediaMapping: Imported as a medium (image or file) into the FirstSpirit media

If errors occur when importing the element into the FirstSpirit project, the node type is shown in red and is accompanied by an error information message (for more information, see Bug fixing in the Template Wizard).

Source path: File path in the local root directory

File name extension: File name extension of the element concerned (e.g., html, pdf, png, etc.)

Exclude (checkbox): Specific items of import project content can be excluded when importing elements into the FirstSpirit project. The “Exclude” checkbox indicates whether the element should be imported (“Exclude” not checked) or should not be imported (“Exclude” checked) into the FirstSpirit project during the next import operation. The box can be checked or unchecked for each element individually. If multiple elements have been selected in the structure view, you can use the “Exclude” tool bar button (2) to exclude/include several elements at the same time.

Configure structure view

The structure view can be configured by clicking the icon at the right-hand edge of the table header. The configuration dialog opens:

The overview, which is in table format, is configured via the entries (Name / UID, Type, Source Path, etc.):

• Information with the icon is taken into account in the overview (i.e., the corresponding columns are included in the table). These entries can be deactivated by clicking the icon.
• Information with the icon is not taken into account in the overview (i.e., the corresponding columns are not included in the table). These entries can be activated by clicking the icon.
• Show only changed elements: If the “Show only changed elements” option is checked, only elements that have changed compared to the last status imported are displayed in the overview (added as new, changed in design deliverable, deleted in the design deliverable, etc.).

Detail view for an element in the import project (6):

A detail view is displayed in the bottom section of the window. This shows information about the selected element from the structure view. It is the element node type that determines which information is displayed:

Display name: Here, you can define the language-dependent display name for the element in the FirstSpirit project. By default, only the file name from the root directory for the master language is transferred. However, this can be changed (along with all other values) and transferred to the FirstSpirit project during the next import operation. The project languages that have been configured for the project concerned are responsible for determining which languages are displayed here.

Name: Unique identifier (UID) under which the element is imported into the FirstSpirit project. If content with this UID is already present within the project, a conflict may occur when importing the element (see information concerning the “Conflicted” status). If the name of the element is changed here, the element is imported into the project under a unique identifier instead. In this case, it will no longer be possible to update any element that has already been imported under the old name.

All the non-editable information for the element is displayed on the right-hand side:

• Name and file name extension
• File path in the local root directory
• File name extension
• File size
• MIME type
• Width (images only)
• Height (images only)
• Preview (images only)

Status: This area shows detailed information on the FirstSpirit status and the HTML status of the element with the relevant color coding applied (see above).

An additional Template/Form “tab” is displayed for input components (see Creating forms).