Updated the doc

docs/en/Modules/Cms-Kit/Dynamic-Widget.md

@@ -1,76 +1,137 @@
 # Dynamic Widget
 
-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.
+CMS kit provides a dynamic [widget](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Widgets) used to render the components previously developed by the software in the content of the pages and blog posts. Its means, that in static content you can use dynamic content. We will mention how you can do it. You have two choices to define the widget in the system: Writing and with UI.
 
-## Options 
-To configure the widget, you should define the below code in YourModule.cs 
+### Adding the widget
+Firstly we will show how to using the widget system via writing manually in the page and blogpost contents.
+
+Let's define the view component
 
+```csharp
+[Widget]
+[ViewComponent(Name = "CmsToday")]
+public class TodayViewComponent : AbpViewComponent
+{
+    public IViewComponentResult Invoke()
+    {
+        return View("~/ViewComponents/Today.cshtml",
+         new TodayViewComponent());
+    }
+} 
+```
+
+```html
+@model Volo.CmsKit.ViewComponents.TodayViewComponent
+
+<p>Welcome Today Component</p>
+<p>@DateTime.Now.ToString()</p>
+
+```
+
+Now configuration time on YourModule.cs
 ```csharp
 Configure<CmsKitContentWidgetOptions>(options =>
     {
-        options.AddWidget(widgetKey: "ExampleWidget", widgetName: "ExampleDate", editorWidgetName: "ExampleModalDate");
+        options.AddWidget("Today","CmsToday");
     }); 
 ```
 
-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="**ExampleWidget**" IsShow="true"]
-> This output is only an example. It changes according to your modal widget (`editorWidgetName`).
+Now you're ready to add your widget by writing.
+[Widget Type="Today"]
+
+After completing the above steps, you should see the above screenshot by going `Pages/Slug`
+![cmskit-without-parameter.png](../../images/cmskit-without-parameter.png)
+
+### Adding by using UI 
+Now we will mention the second option, using UI.
+Once writing these definitions can make some mistakes hence we added a new feature to use widget system easily. 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.
+
+![cms-kit-page-editor](../../images/cms-kit-page-editor.png)
+
+### Adding by using UI with parameters
+Let's improve the above example by adding a new parameter named format. Via this feature, we can use the widget system with many different scenrios but not prolonging the document. Also these examples can be expandable with dependendency injection and getting values from database, but we will use an basic example. We will add format parameter to customize the date.
 
-* `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
+[ViewComponent(Name = "CmsToday")]
+public class TodayViewComponent : AbpViewComponent
 {
-    public IViewComponentResult Invoke(string isShow)
+    public string Format { get; set; }
+
+    public IViewComponentResult Invoke(string format)
     {
-        return View("YourRazorPage.cshtml", 
-        new ExampleDateModel() { IsShow = bool.Parse(isShow) });
+        return View("~/ViewComponents/Today.cshtml",
+         new TodayViewComponent() { Format = format });
     }
 } 
 ```
+
 ```html
-<p>Welcome Comment Date Component</p>
-@if (Model.IsShow)
-{
-    <p> @DateTime.Today.ToLongDateString()</p>
-}
-else
-{
-    <p>Without date</p>
-}
+@model Volo.CmsKit.ViewComponents.TodayViewComponent
+
+<p>Welcome Today Component</p>
+<p>@DateTime.Now.ToString(Format)</p>
+
 ```
-* `editorWidgetName` is used the for editor component side to see on the `Add Widget` modal.
-After choosing the widget type from listbox (now just defined `ExampleWidget`) and renders this widget automatically.
 
+Let's define the format component.
 ```csharp
 [Widget]
-[ViewComponent(Name = "ExampleModalDate")]
-public class ExampleModalDateViewComponent : AbpViewComponent
+[ViewComponent(Name = "Format")]
+public class FormatViewComponent : AbpViewComponent
 {
     public IViewComponentResult Invoke()
     {
-        return View("YourModalRazorPage.cshtml", 
-        new ExampleModalDateViewModel() { IsShow = bool.Parse(isShow) });
-    }
+        return View("~/ViewComponents/Format.cshtml",
+         new FormatViewModel());
+    }  
+}
+
+public class FormatViewModel
+{
+    [DisplayName("Format your date in the component")]
+    public string Format { get; set; }
 }
 ```
 > 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-input asp-for="IsShow" />
+@using Volo.CmsKit.ViewComponents
+@model FormatViewModel
+
+<div>
+    <abp-input asp-for="Format" />
+</div>
+```
+
+```csharp
+Configure<CmsKitContentWidgetOptions>(options =>
+    {
+        options.AddWidget("Today", "CmsToday", "Format");
+    }); 
 ```
 
-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.
+![cmskit-module-editor-parameter](../../images/cmskit-module-editor-parameter.png)
 
-![cms-kit-page-editor](../../images/cms-kit-page-editor.png)
+In this image, after choosing your widget (on the other case, it changes automatically up to your configuration, mine is `Today`. Its parameter name `parameterWidgetName` and its value is `Format`) you will see the next widget. Enter input values or choose them and click `Add`. You will see the underlined output in the editor. Right of the image, also you can see its previewed 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.
+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 configure the widget, you should define the below code in YourModule.cs 
+
+```csharp
+Configure<CmsKitContentWidgetOptions>(options =>
+    {
+        options.AddWidget(widgetType: "Today", widgetName: "CmsToday", parameterWidgetName: "Format");
+    }); 
+```
 
-> [Widget Type="ExampleWidget" IsShow="true"]
+Let's look at these parameters in detail
+* `widgetType` is used for end-user and more readable names. The following bold word represents widgetType.
+[Widget Type="**Today**" Format="yyyy-dd-mm HH:mm:ss"].
 
-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. 
+* `widgetName` is used for your widget name used in code for the name of the `ViewComponent`.
 
-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)
+* `parameterWidgetName` is used the for editor component side to see on the `Add Widget` modal.
+After choosing the widget type from listbox (now just defined `Format`) and renders this widget automatically. It's required only to see UI once using parameters