Open Closed

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


User avatar
0
chimelacaesar created
  • Steps to reproduce the issue

I want to develop a custom widget which will communicate with the database, like get some data from the database & submit data to the database. I see we have an option of Dynamic widget but I don't see any documentation to connect my application module or db directly. Please let me know how can achieve that.


2 Answer(s)
  • User Avatar
    0
    AI-Bot created
    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);
             }
         }
    
    1. Expose the Service via API

      • Make sure your service is accessible from the client (Blazor) by registering it in your HttpApi project.
    2. 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);
             }
         }
    
    1. 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.
    2. 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:


    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.

  • User Avatar
    0
    chimelacaesar created

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

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on September 05, 2025, 09:28