projectdoc Toolbox

Writing page blueprints includes to configure wizards for easy page creation. If the field identifier contains dots there is a problem with a simple solution.

Audience: Template Author
Type: Tip
Level of Experience: Advanced Beginner
Expected Duration: 5 min

A Template Author may need to specify the identifier for an input field of a wizard for the blueprint for one of the doctypes. This identifier my contain dots which cause problems since in the JavaScript environment a dot signals a dereference of an object property. In our case the dot is just a character that is part of the identifier.

This tip is intended for users of the projectdoc Toolbox, but it will work for any blueprint for Confluence.

Change with Version 6.0

Since version 6.0 of the projectdoc Toolbox the dots in identifiers are replaced by underscores.

This is true for all identifiers used in the wizard.

projectdoc.doctype.common.name is now specified as projectdoc_doctype_common_name

Summary

The trick is to escape the dot with two backslashes, not one.

#projectdoc\\.strategic-theme\\.duration\\.from

Escape!

The identifier is specified for the Soy template that is the basis for the UI of the page blueprint wizard.

For the projectdoc Toolbox this is configured in the doctype descriptor like this:

Wizard Configuration

<doctype ...>
  ...
  <wizard template="no-homepage" form-id="strategic-theme-form">
    <field template="text-field" name="projectdoc.strategic-theme.duration.from"/>
    <field template="text-field" name="projectdoc.strategic-theme.duration.to"/>
  </wizard>
</doctype>

We have two fields that allow the author of a new document to specify two values used as property values in the new document.

Document Template

<doctype ...>
  ...
  <properties>
    ...
    <property key="projectdoc.doctype.common.duration.from">
      <value><xml><![CDATA[<at:var at:name="projectdoc.strategic-theme.duration.from" at:rawxhtml="true"/>]]></xml></value>
      <controls>hide</controls>
      <resource-bundle>
        <l10n>
          <description>
            Log the start date of the cycle this strategic theme is pursued.
          </description>
        </l10n>
      </resource-bundle>
    </property>
    <property key="projectdoc.doctype.common.duration.to">
      <value><xml><![CDATA[<at:var at:name="projectdoc.strategic-theme.duration.to" at:rawxhtml="true"/>]]></xml></value>
      <controls>hide</controls>
      <resource-bundle>
        <l10n>
          <description>
            Log the end date of the cycle this strategic theme is pursued.
          </description>
        </l10n>
      </resource-bundle>
    </property>
    ...
  </properties>
  ...
</doctype>

The wizard requires to configure the fields with a date picker.

Here is the configuration to attach date pickers to the two input fields of the wizard:

Wizard's JavaScript

Confluence.Blueprint.setWizard(
		'de.smartics.atlassian.confluence.smartics-doctype-addon-okrs:create-doctype-template-strategic-theme', function(wizard) {
    wizard.on('pre-render.page1Id', function(e, state) {
        state.wizardData.selectedWebItemData = PROJECTDOC.prerenderWizard(e, state);
      });

	wizard.on("post-render.page1Id", function(e, state) {
        $('#projectdoc\\.strategic-theme\\.duration\\.from').datePicker({
        	overrideBrowserDefault: true
        });
        $('#projectdoc\\.strategic-theme\\.duration\\.to').datePicker({
        	overrideBrowserDefault: true
        });
        PROJECTDOC.postrenderWizard(e, state);
    });

    wizard.on('submit.page1Id', function(e, state) {
    	PROJECTDOC.adjustToLocation(state);
    });

    wizard.assembleSubmissionObject = PROJECTDOC.assemblePageCreationData;
});

Please note that there are two backslashes to escape the dot. Now the dots are correctly recognized as characters.

Resources

Doctype Maven Plugin: Create doctype add-ons (OBRs) for the projectdoc Toolbox with Confluence Blueprints based on XML model descriptions easily!
AUI Date Picker: Documentation for the Confluence AUI date picker.
Date Picker Design: Information on the design of the Confluence date picker.
Writing Soy templates in your plugin: The tutorial shows how to write a Soy template for Confluence plugins with JavaScript.
How to use JavaScript in Confluence: Introduction on how to use JavaScript with Confluence.
JavaScript property access: dot notation vs. brackets?: Alternative approach to access object properties with JavaScript not discussed in this tip.
JavaScript Language Resources: Information on developer.mozilla.org on JavaScript.

Space shortcuts

Page tree

Docs

Support

Free Blueprints

Tooling for Blueprints

Free Extensions

Spaces

Plugins for Maven

Incubator

Libraries for Java

Incubator

Add-ons for Confluence

Tools

Support

Team

Legal

Summary

Escape!

Resources

About

Keep up-to-date!

Powered by