How to connect with my database from dynamic widget of cms kit? #9855

5 Answer(s)

• 

  0

  AI-Bot created 20 days ago

  Support Team ABP Agent

  To connect your custom CMS Kit dynamic widget to the database in ABP, you should follow these steps:

  1. Create an Application Service
     • Define an application service in your application layer. This service will contain methods to get and submit data to your database using repositories or DbContext.
     • Example:

  public class MyWidgetAppService : ApplicationService
       {
           private readonly IRepository<MyEntity, Guid> _repository;
  
           public MyWidgetAppService(IRepository<MyEntity, Guid> repository)
           {
               _repository = repository;
           }
  
           public async Task<List<MyEntityDto>> GetDataAsync()
           {
               var items = await _repository.GetListAsync();
               return ObjectMapper.Map<List<MyEntity>, List<MyEntityDto>>(items);
           }
  
           public async Task SubmitDataAsync(MyEntityDto input)
           {
               var entity = ObjectMapper.Map<MyEntityDto, MyEntity>(input);
               await _repository.InsertAsync(entity);
           }
       }
  

  2. Expose the Service via API

     • Make sure your service is accessible from the client (Blazor) by registering it in your HttpApi project.

  3. Call the Service from Your Widget

     • In your dynamic widget's Razor component or JavaScript, call the application service API endpoints to fetch or submit data.
     • For Blazor:

  @inject IMyWidgetAppService MyWidgetAppService
  
       @code {
           private List<MyEntityDto> items;
  
           protected override async Task OnInitializedAsync()
           {
               items = await MyWidgetAppService.GetDataAsync();
           }
  
           private async Task SubmitAsync(MyEntityDto input)
           {
               await MyWidgetAppService.SubmitDataAsync(input);
           }
       }
  

  4. Register the Widget

     • Register your widget in the CMS Kit so it can be used as a dynamic widget. You can do this via code or the UI, depending on your requirements.

  5. Use the Widget in CMS Content

     • Add your widget to a page or post using the CMS Kit's dynamic widget system.

  This approach ensures your widget communicates securely and efficiently with your database using ABP's recommended patterns.

  Sources:

  • CMS Kit Dynamic Widget Documentation
  • ABP Application Services
  • ABP Widgets (MVC/Blazor)

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  chimelacaesar created 20 days ago

  Hi, AI didn't address my query. Please anyone from support team can help me with my query.

  Save Cancel
• 

  0

  maliming created 18 days ago

  Support Team Fullstack Developer

  hi

  You can inject your app services, repository, or any services into TodayViewComponent. then query the database by them.

  [Widget]
  [ViewComponent(Name = "CmsToday")]
  public class TodayViewComponent : AbpViewComponent
  {
      private readonly IDashboardAppService _dashboardAppService;
  
      public TodayViewComponent(IDashboardAppService dashboardAppService)
      {
          _dashboardAppService = dashboardAppService;
      }
  
      public IViewComponentResult Invoke()
      {
          return View("~/ViewComponents/Today.cshtml",
           new TodayViewComponent());
      }
  } 
  

  Thanks.

  Save Cancel
• 

  0

  devchase321 created 17 days ago

  Thank you it is working.

  Save Cancel
• 

  0

  maliming created 17 days ago

  Support Team Fullstack Developer

  Great 👍

  Save Cancel