diff --git a/docs/en/Modules/Cms-Kit/Dynamic-Widget.md b/docs/en/Modules/Cms-Kit/Dynamic-Widget.md new file mode 100644 index 0000000000..5c955dae21 --- /dev/null +++ b/docs/en/Modules/Cms-Kit/Dynamic-Widget.md @@ -0,0 +1,50 @@ +# Dynamic Widget + +CMS kit provides a widget system to allow generate dynamic widgets in pages and blog posts. Here is a completed example widget screenshot for the poll on the `Page` side. + +> Important Note: The poll widget in ABP Commercial is the only widget implemented + +![cmskit-example-output-on-page](../../images/cmskit-example-output-on-page.png) + +> Also, you can do the same thing for other widgets. It's just an example. + +To see the above image, you should go page or blogpost to create or update one. Then click the `W` button to add a dynamic widget like the below image. Don't forget please this is design mode and you need to view your page in view mode after saving. Also `Preview` tab on the editor will be ready to check your output easily for widget configurations in the next features. + +![cmskit-add-widget-on-page](../../images/cmskit-add-widget-on-page.png) + +In this image, after choosing your poll (on the other case, it changes automatically up to your configuration, mine is the poll widget. Its parameter name `editorWidgetName`) you will see the next widget. Enter input values or choose them and click `Add`. You will see the below output + +> [Widget Type="Poll" Code="SelectedValue"] + +You can edit this output manually if do any wrong coding for that (wrong value or typo) you won't see the widget, even so, your page will be viewed successfully. + +## Options +To see the above image must have been configured in YourModule.cs + +```csharp +Configure(options => + { + options.AddWidget("widgetKey", "widgetName", "editorWidgetName"); + }); +``` + +Let's look at these parameters in detail +* `widgetKey` is used for end-user and more readable names. The following bold word represents widgetKey. + [Widget Type="**Poll**" Code="SelectedValue"] + +* `widgetName` is used for your widget name used in code via [Widget] attribute. +```csharp +[Widget] +public class WidgetNameViewComponent : AbpViewComponent +{ + public IViewComponentResult Invoke() + { + return View(); + } +} + +``` +* `editorWidgetName` is used the for editor component side to see on the `Add Widget` modal. +After choosing the widget type from listbox and renders this widget automatically. + +If you need more detail on creating and using widgets please click [here](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Widgets). \ No newline at end of file diff --git a/docs/en/Modules/Cms-Kit/Index.md b/docs/en/Modules/Cms-Kit/Index.md index 072f196f10..b8cbe89d20 100644 --- a/docs/en/Modules/Cms-Kit/Index.md +++ b/docs/en/Modules/Cms-Kit/Index.md @@ -14,6 +14,7 @@ The following features are currently available: * Provides a [**rating**](Ratings.md) system to add rating feature to any kind of resource. * Provides a [**menu**](Menus.md) system to manage public menus dynamically. * Provides a [**global resources**](Global-Resources.md) system to add global styles and scripts dynamically. +* Provides a [**Dynamic Widget**](Dynamic-Widget.md) system to create dynamic widgets for page and blog posts. Click to a feature to understand and learn how to use it. diff --git a/docs/en/images/cmskit-add-widget-on-page.png b/docs/en/images/cmskit-add-widget-on-page.png new file mode 100644 index 0000000000..8e03964477 Binary files /dev/null and b/docs/en/images/cmskit-add-widget-on-page.png differ diff --git a/docs/en/images/cmskit-example-output-on-page.png b/docs/en/images/cmskit-example-output-on-page.png new file mode 100644 index 0000000000..bdc5c52278 Binary files /dev/null and b/docs/en/images/cmskit-example-output-on-page.png differ