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.
CMS kit provides a widget system to render dynamic [widgets](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Widgets) in pages and blog posts. Its means, that in static content you can use dynamic content. We will mention how you can do it.
## Options
To configure the widget, you should define as the below code in YourModule.cs
To configure the widget, you should define the below code in YourModule.cs
> This output is only an example. It changes according to your modal widget (`editorWidgetName`).
* `widgetName` is used for your widget name used in code via [Widget] attribute.
* `widgetName` is used for your widget name used in code for the name of the `ViewComponent`.
```csharp
[Widget]
[ViewComponent(Name = "ExampleDate")]
public class ExampleDateViewComponent : AbpViewComponent
{
public IViewComponentResult Invoke(string isShow)
@ -39,10 +42,11 @@ else
}
```
* `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.
After choosing the widget type from listbox (now just defined `ExampleWidget`) and renders this widget automatically.
```csharp
[Widget]
[ViewComponent(Name = "ExampleModalDate")]
public class ExampleModalDateViewComponent : AbpViewComponent
{
public IViewComponentResult Invoke()
@ -52,21 +56,21 @@ public class ExampleModalDateViewComponent : AbpViewComponent
}
}
```
> Important Note: To get properties properly you should set `name` property on razor page or you may use abp component. It handles that automatically
> Important Note: To get properties properly you should set the `name` property on the razor page or you may use the ABP component. ABP handles that automatically.
```html
<abp-inputasp-for="IsShow"/>
```
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.
Now ready to see the changes at the Page/Blogpost create/update pages. To the right of the editor, you will see the customized`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.
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.
In this image, after choosing your widget (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.
You can edit this output manually if do any wrong coding for that (wrong value or typo) you won't see the widget (ex, the first two lines have wrong values in the editor and they aren't shown in view mode), even so, your page will be viewed successfully.
After completing the above steps, you should see the above screenshot by going `Pages/Slug`
malik masis
4 years ago