Distribute builder components

After you create a custom page builder or form builder component for your project, you might want to share the code of this component among other projects inside your company, or with the rest of the world. 

The most common way of distributing code in the .NET community is using NuGet packages. NuGet packages are code bundles containing compiled code along with other content needed in the projects for which they are created. Developers can share these packages with other developers directly or by publishing them to public or private hosts (such as nuget.org). Another possible way of distributing your code is simply by sharing the code packaged in ZIP files.

On this page, you can read about best practices related to distributing builder components. See the following sections for information about individual types of components:

• Widgets
• Inline property editors
• Page builder sections
• Page templates
• Form components
• Form builder sections
• Personalization condition types with a custom configuration dialog
• Single class components

Widgets

• Use a unique prefix in your widget identifiers to prevent conflicts when deploying the widgets to other projects. For example, the prefix can match your company’s name.
• Store all text displayed by the widgets using resource strings. Create a designated RESX file for the resource strings of each of your widgets in the ~/App_Data/Global/Resourcesdirectory.
• Place all custom code into ~/Components/PageBuilder/Widgets/<WidgetIdentifier>. This includes the widget’s:
  • Controller.
  • Property and view models.
  • View files.
• Place administration-only script and stylesheet files into the ~wwwroot/PageBuilder/Admin/Widgets/<WidgetIdentifier> directory.
• Place general script and stylesheet files into the ~wwwroot/PageBuilder/Public/Widgets/<WidgetIdentifier> directory.

See Widgets for Page Builder for more information.

Inline property editors

• Use a unique prefix in your inline editor identifiers to prevent conflicts when deploying the editors to other projects. For example, the prefix can match your company’s name.
• Store all text displayed by the inline editors using resource strings. Create a designated RESX file for the resource strings of each of your inline editors in the ~/App_Data/Global/Resourcesdirectory.
• Place all custom code into ~/Components/PageBuilder/InlineEditors/<InlineEditorIdentifier>. This includes the editor’s:
  • View models.
  • View files.
• Place script and stylesheet files into the ~wwwroot/PageBuilder/Admin/InlineEditors/<InlineEditorIdentifier> directory.

See Inline editors for widget properties for more information.

Page builder sections

• Use a unique prefix in your section identifiers to prevent conflicts when deploying the widgets to other projects. For example, the prefix can match your company’s name.
• Store all text displayed by the widgets using resource strings. Create a designated RESX file for the resource strings of each of your widgets in the ~/App_Data/Global/Resourcesdirectory.
• Place all custom code into ~/Components/PageBuilder/Sections/<SectionIdentifier>. This includes the section’s:
  • Controller.
  • View model.
  • View files.
• Place administration-only script and stylesheet files into the ~wwwroot/PageBuilder/Admin/Sections/<SectionIdentifier> directory.
• Place general script and stylesheet files into the ~wwwroot/PageBuilder/Public/Sections/<SectionIdentifier> directory.

See Sections for Page Builder for more information.

Page templates

• Use a unique prefix in your page template identifiers to prevent conflicts when deploying the page templates to other projects. For example, the prefix can match your company’s name.
• Store all text displayed by the page templates using resource strings. Create a designated RESX file for the resource strings of each of your page templates in the ~/App_Data/Global/Resourcesdirectory.
• Place all custom code into ~/Components/PageBuilder/Templates/<TemplateIdentifier>. This includes the template’s:
  • View model.
  • View files.
• Place administration-only script and stylesheet files into the ~wwwroot/PageBuilder/Admin/Templates/<TemplateIdentifier> directory.
• Place general script and stylesheet files into the ~wwwroot/PageBuilder/Public/Templates/<TemplateIdentifier> directory.
• Place your page template filters into the ~/Components/PageBuilder/Templates/PageTemplateFilters directory.

See Page templates for Page Builder for more information.

Form components

• Use a unique prefix in your form component identifiers to prevent conflicts when deploying the components to other projects. For example, the prefix can match your company’s name.
• Store all text displayed by the form components using resource strings. Create a designated RESX file for the resource strings of each of your components in the ~/App_Data/Global/Resourcesdirectory.
• Place all custom code into ~/Components/FormBuilder/FormComponents/<FormComponentIdentifier>. This includes the component’s:
  • Form component classes.
  • Form component properties.
  • View files.
• Place administration-only script and stylesheet files into the ~wwwroot/FormBuilder/Admin/FormComponents/<ComponentIdentifier> directory.
• Place general script and stylesheet files into the ~wwwroot/FormBuilder/Public/FormComponents/<ComponentIdentifier> directory.

See Form components for more information.

Form builder sections

• Use a unique prefix in your form section identifiers to prevent conflicts when deploying the sections to other projects. For example, the prefix can match your company’s name.
• Store all text displayed by the form builder sections using resource strings. Create a designated RESX file for the resource strings of each of your sections in the ~/App_Data/Global/Resourcesdirectory.
• Place all custom code into ~/Components/FormBuilder/FormSections/<FormSectionIdentifier>. This includes the section’s:
  • Controllers.
  • Model classes.
  • View files.
• Place administration-only script and stylesheet files into the ~wwwroot/FormBuilder/Admin/FormSections/<FormSectionIdentifier> directory.
• Place general script and stylesheet files into the ~wwwroot/FormBuilder/Public/FormSections/<FormSectionIdentifier> directory.

See Form sections for more information.

Personalization condition types with a custom configuration dialog

• Use a unique prefix in your condition type identifiers to prevent conflicts when deploying the condition types to other projects. For example, the prefix can match your company’s name.

• Store all text displayed by the condition types using resource strings. Create a designated RESX file for the resource strings of each of your condition types in the ~/App_Data/Global/Resourcesdirectory.

• Place all code into ~/Components/PageBuilder/Personalization/<ConditionIdentifier>. This includes the condition’s:

  • Type classes.
  • Dialog controllers.
  • Dialog models.
  • Dialog views.

• Place administration-only CSS and JavaScript files into the ~wwwroot/PageBuilder/Admin/Personalization/<ConditionIdentifier> directory.

• Place general CSS and JavaScript files into the ~wwwroot/PageBuilder/Public/Personalization/<ConditionIdentifier> directory.

See Widget personalization for more information.

Single class components

When distributing components consisting of a single class, such as personalization condition types:

• Use a unique prefix in your component identifiers to prevent conflicts when deploying the components to other projects. For example, the prefix can match your company’s name.
• Store all text displayed by the components using resource strings. Create a designated RESX file for the resource strings of each of your components in the ~/App_Data/Global/Resourcesdirectory.