IMPORTANT: Packages dependencies are not available yet.
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".
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.
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.
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.
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 & because it is not supported in XML attributes value.
Example of ImportFonts section:
<ImportFonts>
<Font Location="https://fonts.googleapis.com/css2?family=Roboto&display=swap"><![CDATA['Roboto', sans-serif]]></Font>
<Font Location="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"><![CDATA['Open Sans', sans-serif]]></Font>
<Font Location="https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps&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:
|
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>