JsonFeed is a universal component used to display dynamic content feeds such as blog posts, news, products, videos, events, or documents. The component loads data from an external JSON feed and renders it according to the selected layout mode.
JsonFeed can be reused multiple times on the same page, each instance configured with its own data source and display mode.
Usage examples:
<div>
<h3 class="bg-green pa-8 mb-2">*** Blog:</h3>
<ui-json-feed id="jf0" mode="blog"
url="https://newave.ru/category/blog/feed/json">
</ui-json-feed>
<h3 class="bg-green pa-8 mb-2">*** Academy:</h3>
<ui-json-feed id="jf1" mode="academy"
url="https://newave.ru/category/academy/feed/json">
</ui-json-feed>
<h3 class="bg-green pa-8 mb-2">*** Events:</h3>
<ui-json-feed id="jf2" mode="events"
url="https://newave.ru/category/calendar/feed/json">
</ui-json-feed>
<h3 class="bg-green pa-8 mb-2">*** Resources:</h3>
<ui-json-feed id="jf3" mode="resources"
url="https://newave.ru/category/resources/feed/json">
</ui-json-feed>
<h3 class="bg-green pa-8 mb-2">*** Videos:</h3>
<ui-json-feed id="jf4" mode="videos"
url="https://newave.ru/category/videos/feed/json">
</ui-json-feed>
</div>Each instance defines its own feed source and rendering logic through component properties.
| props | default | type | description |
| id | String | In-system component identifier. Required when opening module settings from the online office. | |
| mode | String | Layout and rendering mode of the feed. Defines how items are displayed (text, videos). | |
| url | String | Path to the JSON feed that provides the data source for the component. |
Note: All of the settings can be customized either from admin panel by manually editing code or from within the back office by pressing on a cog icon in a left upper corner of the page (only accessible when "Online office admin" flag is presented).