Web packages manifest description

The manifest helps the application understand what the Web Package is supposed to do.

It's a XML file that contains different mandatory and optional elements.


In the archive file, the manifest must be named "def.xml".

IMPORTANT: Packages dependencies are not available yet.

File architecture

A typical manifest file looks like that:

<?xml version="1.0" encoding="utf-8" ?>
<Package>
<Metadata>
<!-- Section that contains information about your package -->
</Metadata>
<Settings>
<!-- Section that contains settings for your package -->
</Settings>
<ImportFonts>
<!-- Section that contains fonts definitions to import -->
</ImportFonts>
<ScriptReferences>
<!-- Section that contains script intellisense definitions to import -->
</ScriptReferences>
<BuildActions>
<!-- Section that contains actions that your package will do to the website -->
</BuildActions>
</Package>

Metadata section

The Metadata section contains general information about your Web Package, such as its name, the author's name, the package version number...

Here is the list of supported properties:

Node name
Type
Is required
Description
Id
String
YES
The internal name of the web package 
This value must not contain spaces 
Max length is 100 characters
Version
Version String
YES
The version of the package 
Looks like 0.0.0.0 
Authors
String
YES
The name or names of the package authors, max length is 50 characters
LicenseUrl
String
NO
The URL of the license of the package 
Max length is 255 characters
ProjectUrl
String
NO
The URL of the project website 
Max length is 255 characters
Description
String
YES
Short description of what the package does 
Max length is 250 characters 
ReleaseNotes
String
NO
Short description of what is new in this version of the package 
Max length is 250 characters
Copyright
String
NO
The copyright mentions
Max length is 50 characters

IMPORTANT: Be sure of the name of your Web Package. Once it's sent to the Store, all the updates must have the exact same name. You won't be able to change the name of a published Web Package.

IMPORTANT: Once a name is used in the Store, it is reserved. Only the author of the first package with this name can reuse it.

Example of Metadata section:

<Metadata>
<Name>Fabrikam.UI.Toolkit</Name>
<Version>3.0.0.1</Version>
<Authors>The Fabrikam Company</Authors>
<LicenseUrl>https://fabrikam.com/Toolkit/License.html</LicenseUrl>
<ProjectUrl>https://fabrikam.com</ProjectUrl>
<Description>This package includes all native controls replacements
to transform your website using the Fabrikam design guidelines.</Description>
<ReleaseNotes>Updated the HTML Checkbox visual.</ReleaseNotes>
<Copyright>The Fabrikam Company, 2022</Copyright>
</Metadata>

Settings section

The Settings section contains settings that can change the behavior of the application to make your package work properly.

Here is the list of supported properties:

Node name
Type
Description
IsDesignerIgnored
Boolean
Indicates that the Web Package should be ignored in the designer. You must set this option to true if your package includes scripts that dynamically creates content, otherwise the user experience will be impacted. 
If not set, your Web Package will be executed at design time. In most cases, set it to true.

ScriptReferences section

Added in PageFabric 2022.6. It has no effect in previous versions.

This section is used to import intellisense capabilities to the code editor in PageFabric.

Type

The Type node is used to describe types or namespaces. The supported attributes are:

Attribute
Type
Description
Name
String
Contains the name of the type or namespace.
Description
String
Contains a description of what the method does. It will be displayed in the intellisense popup.
OnlineDocsUrl
String
Contains the URL of the online documentation about this type/namespace.

The Type node can contain several Type (for namespacing), Property or Method nodes.

Property

The Property node is used to describe properties in a Type. The supported attributes are:

Attribute
Type
Description
Name
String
Contains the name of the type or namespace.
Description
String
Contains a description of what the method does. It will be displayed in the intellisense popup.
Type
String
Contains the type of the property.
IsReadOnly
Boolean
Defines if the property is readonly in your library.

The Type node can contain several Type (for namespacing), Property or Method nodes.

Method

The Method node is used to describe methods. The supported attributes are:

Attribute
Type
Description
Name
String
Contains the name of the method.
Signature
String
Contains the method signature. It will be displayed in the intellisense popup.
Description
String
Contains a description of what the method does. It will be displayed in the intellisense popup.
ReturnType
String
Contains the return type of the method. Can be a type defined in your manifest to help intellisense suggest the good actions.

The Method node must have a Snippet child that contains the exact Javascript code to append when the user adds this method to his script.

Example of ScriptReferences section:

<ScriptReferences>
<Type Name="MyPlugin" Description="Gives access to Forms features." OnlineDocsUrl="">
<Property Name="myProperty" Description="Gets the language of the current page." Type="string" IsReadOnly="true"/>
<Method Name="appendSectionRow" Signature="appendSectionRow(id)" Description="Adds a row to the specified form Section." ReturnType="void">
<Snippet>
<![CDATA[appendSectionRow("sectionId");]]>
</Snippet>
</Method>
</ScriptReferences>

ImportFonts section

Added in PageFabric 2022.6. It has no effect in previous versions.

By importing fonts in this way, the user will see the names of available fonts in the Custom Font dialog box. Hence, it improves the user experience.

Node name
Type
Description
Font
String
Indicate a font name that can be used once the package is added to the website. 
You can specify a location where the font is defined using the Location attribute.

Note: If you use the Location attribute, pay attention to the string you use. The & symbol has to be written &amp; because it is not supported in XML attributes value.

Example of ImportFonts section:

<ImportFonts>
<Font Location="https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap"><![CDATA['Roboto', sans-serif]]></Font>
<Font Location="https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap"><![CDATA['Open Sans', sans-serif]]></Font>
<Font Location="https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps&amp;display=swap"><![CDATA['Oleo Script Swash Caps', cursive]]></Font>
</ImportFonts>

CustomAttributes section

Added in PageFabric 2022.6. It has no effect in previous versions.

The CustomAttributes section is used to add suggestions in the Custom attribute dialog for each part.

Here is a list of the supported attributes:

Node name
Type
Description
AppliesTo
String
Defines the Part that can contain this Custom Attribute, for example, you can decide that your Custom Attribute is only available on the Button Part. 
See list of names here.
Name
String
The name of your Custom Attribute. This value will be transformed to lowercase. HTML attributes will automatically be converted to lowercase by almost all modern browsers.
Value
String
A suggested value for the Custom Attribute. You can add multiple values by duplicating the full declaration.
Description
String
A short description of what the Custom Attribute is used for.
OnlineDocsUrl
String
The online documentation to use the Custom Attribute. Not used at the moment.

Example of CustomAttributes section:

<CustomAttributes>
<Attribute AppliesTo="Button" Name="forms-btnclickaction" Value="addSectionRow" Description="This action lets you add a row to an existing form section" />
</CustomAttributes>

CustomStyles section

Added in PageFabric 2022.9. It has no effect in previous versions.

The CustomStyles section is used to add suggestions in the Style combobox for each part.

Here is a list of the supported attributes:

Node name
Type
Description
AppliesTo
String
Defines which kind of part can use this style. 
See list of names here.
Name
String
The name to display in the dropdown list in the Style properties panel.
Value
String
The CSS class name that is linked to this style

Example of CustomAttributes section:

<CustomStyles>
<Style AppliesTo="FormSection" Name="Default style" Value="defaultFormSection"/>
</CustomStyles>

BuildActions section

The BuildActions section contains all actions that the application has to perform when the website is generated.

Here is the list of supported properties:

Node name
Type
Description
IncludeResource
String
Will deploy the specified file to the corresponding output folder. 
The output directory will depend on the file extension: 
.js -> deployed to /assets/scripts 
.css -> deployed to /assets/css
images and videos -> deployed to /assets/images
Other files will be ignored
ImportResource
String
Will add the html tag to import a reference to the specified file. The path is automatically managed.
AppendHtml
String
Will append custom HTML code at the specified position (Position attribute). 
The Position attribute supported values are:
  • EndOfHead (content will be added before the head closing tag)
  • EndOfBody (content will be added before the body closing tag)

Example of BuildActions section:

<BuildActions>

<!-- Include files in the publication process -->
<IncludeResource>plyr.js</IncludeResource>
<IncludeResource>plyr.css</IncludeResource>

<!-- Import references to the files in the HEAD tag -->
<ImportResource>plyr.css</ImportResource>
<ImportResource>plyr.js</ImportResource>

<AppendHtml Position="EndOfBody">
<![CDATA[
<p>Copyright MyCorporation</p>
]]>
</AppendHtml>

</BuildActions>
Improve your PageFabric skills

Explore user guide

Have a question?

Join us on twitter