docs/en/modules/cms-kit/marked-items.md
//[doc-seo]
{
"Description": "Discover how to implement and customize a marking system for your resources in the CMS Kit, enhancing user engagement effortlessly."
}
CMS kit provides a marking system to mark any kind of resource, like a blog post or a product, as a favorite, starred, flagged, or bookmarked.
Marked toggling component allows users to mark your items via pre-defined icons/emojis. Here how the marked toggling components may look like:
you can also customize the marking icons shown in the toggling components.
By default, CMS Kit features are disabled. Therefore, you need to enable the features you want, before starting to use it. You can use the Global Feature system to enable/disable CMS Kit features on development time. Alternatively, you can use the ABP Framework's Feature System to disable a CMS Kit feature on runtime.
Check the "How to Install" section of the CMS Kit Module documentation to see how to enable/disable CMS Kit features on development time.
Marking system provides a simple approach to define your entity type with mark types like favorite or starred. For example, if you want to use the marking system for products, you need to define an entity type named product with the icon name.
CmsKitMarkedItemOptions can be configured in YourModule.cs, in the ConfigureServices method of your module. Example:
Configure<CmsKitMarkedItemOptions>(options =>
{
options.EntityTypes.Add(
new MarkedItemEntityTypeDefinition(
"product",
StandardMarkedItems.Favorite
)
);
});
CmsKitMarkedItemOptions properties:
EntityTypes: List of defined entity types (CmsKitMarkedItemOptions) in the marking system.MarkedItemEntityTypeDefinition properties:
EntityType: Name of the entity type.IconName: The name of the icon.The marking system provides a toggle widget to allow users to add/remove the marks from an item. You can place the widget with the item as shown below:
@await Component.InvokeAsync(typeof (MarkedItemToggleViewComponent), new
{
entityId = "...",
entityType = "product",
needsConfirmation = true // (optional)
})
entityType was explained in the previous section.entityId should be the unique id of the product, in this example. If you have a Product entity, you can use its Id here.needsConfirmation An optional parameter to let the user confirm when removing the mark.Users can filter their marked items to easily find their favorites. Here's how to utilize the GetEntityIdsFilteredByUserAsync method to filter the user's marked items within your repository queries:
List<string> entityIdFilters = null;
if (userId.HasValue)
{
entityIdFilters = await UserMarkedItemRepository.GetEntityIdsFilteredByUserAsync(
userId.Value,
entityType,
cancellationToken: cancellationToken
);
}
var queryable = (await GetDbSetAsync())
.WhereIf(entityIdFilters != null, x => entityIdFilters.Contains(x.Id.ToString()));
// Additional query logic...
GetEntityIdsFilteredByUserAsync: Retrieves a list of entity IDs marked by the user for the given entity type.userId: The ID of the user performing the filtering.entityType: The type of entity being filtered (e.g., "product").entityIdFilters: A list of marked entity IDs that will be used to filter the items in the database.This module follows the Entity Best Practices & Conventions guide.
A user markedItem represents a user has marking on the item.
UserMarkedItem (aggregate root): Represents a marked item in the system.This module follows the Repository Best Practices & Conventions guide.
Following custom repositories are defined for this feature:
IUserMarkedItemRepositoryThis module follows the Domain Services Best Practices & Conventions guide.
MarkedItemManager is used to perform some operations for the UserMarkedItem aggregate root.
MarkedItemPublicAppService (implements IMarkedItemPublicAppService): Implements the use cases of marking system.All tables/collections use the Cms prefix by default. Set static properties on the CmsKitDbProperties class if you need to change the table prefix or set a schema name (if supported by your database provider).
This module uses CmsKit for the connection string name. If you don't define a connection string with this name, it fallbacks to the Default connection string.
See the connection strings documentation for details.