diff --git a/docs/en/Modules/Cms-Kit/Dynamic-Widget.md b/docs/en/Modules/Cms-Kit/Dynamic-Widget.md index 5c955dae21..9629b8b035 100644 --- a/docs/en/Modules/Cms-Kit/Dynamic-Widget.md +++ b/docs/en/Modules/Cms-Kit/Dynamic-Widget.md @@ -1,50 +1,72 @@ # 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. +CMS kit provides a widget system to allow render dynamic [widgets](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Widgets) in pages and blog posts. Its mean, in static content you can use the dynamic content. We will mention how you can do it. ## Options -To see the above image must have been configured in YourModule.cs +To configure the widget, you should define as the below code in YourModule.cs ```csharp Configure(options => { - options.AddWidget("widgetKey", "widgetName", "editorWidgetName"); + options.AddWidget(widgetKey: "ExampleWidget", widgetName: "ExampleDate", editorWidgetName: "ExampleModalDate"); }); ``` 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"] + [Widget Type="**ExampleWidget**" Code="SelectedValue"] * `widgetName` is used for your widget name used in code via [Widget] attribute. ```csharp -[Widget] -public class WidgetNameViewComponent : AbpViewComponent +public class ExampleDateViewComponent : AbpViewComponent { - public IViewComponentResult Invoke() + public IViewComponentResult Invoke(string isShow) { - return View(); + return View("YourRazorPage.cshtml", + new ExampleDateModel() { IsShow = bool.Parse(isShow) }); } +} +``` +```html +

Welcome Comment Date Component

+@if (Model.IsShow) +{ +

@DateTime.Today.ToLongDateString()

+} +else +{ +

Without date

} - ``` * `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 +```csharp +[Widget] +public class ExampleModalDateViewComponent : AbpViewComponent +{ + public IViewComponentResult Invoke() + { + return View("YourModalRazorPage.cshtml", + new ExampleModalDateViewModel() { IsShow = bool.Parse(isShow) }); + } +} +``` +> Important Note: To get properties properly you should set `name` property on razor page or you may use abp component. It handles that automatically + +```html + +``` + +Now ready to see the changes on Page/Blogpost create/update pages. Right of the editor you will see the customized 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. + +![cms-kit-page-editor](../../images/cms-kit-page-editor.png) + +In this image, after choosing your wwidget (on the other case, it changes automatically up to your configuration, mine is `Example Widget`. Its parameter name `editorWidgetName` and its value is `ExampleModalDate`) you will see the next widget. Enter input values or choose them and click `Add`. You will see the below output. + +> [Widget Type="ExampleWidget" IsShow="true"] + +You can edit this output manually if do any wrong coding for that (wrong value or typo) you won't see the widget (ex, first two lines have wrong values in the editor ), even so, your page will be viewed successfully. + +After completing the above steps, you should see the above screenshot by going `Pages/Slug` +![cms-kit-widget-preview](../../images/cms-kit-widget-preview.png) \ No newline at end of file diff --git a/docs/en/images/cms-kit-page-editor.png b/docs/en/images/cms-kit-page-editor.png new file mode 100644 index 0000000000..0c9fcbb63d Binary files /dev/null and b/docs/en/images/cms-kit-page-editor.png differ diff --git a/docs/en/images/cms-kit-widget-preview.png b/docs/en/images/cms-kit-widget-preview.png new file mode 100644 index 0000000000..df071adc65 Binary files /dev/null and b/docs/en/images/cms-kit-widget-preview.png differ diff --git a/docs/en/images/cmskit-add-widget-on-page.png b/docs/en/images/cmskit-add-widget-on-page.png deleted file mode 100644 index 8e03964477..0000000000 Binary files a/docs/en/images/cmskit-add-widget-on-page.png and /dev/null differ diff --git a/docs/en/images/cmskit-example-output-on-page.png b/docs/en/images/cmskit-example-output-on-page.png deleted file mode 100644 index bdc5c52278..0000000000 Binary files a/docs/en/images/cmskit-example-output-on-page.png and /dev/null differ