ao link
Affino
Remember Login
Search

News Design Element Guide

The News Design Element is an AI-powered news-summary component that turns a filtered set of articles into a readable digest on the front end. It became a much more configurable product feature rather than a simple output box.

 

Now control the sections it reads from, the time frames it offers, the maximum number of article summaries it considers, the sort order it uses, whether guests and logged-in users see different security-scoped content, which topics can be used for personalisation, and what fallback message appears when nothing matches. Tooltip behaviour and summary display behaviour also became configurable.

 

This matters because the News Design Element is not just about generating text. It is about turning editorial content into a useful front-end summary experience that can reflect security rules, topic preferences, and changing content without forcing editors to hand-write a fresh digest every time.

2. Quick Start

Use this path when you want to get a News Design Element working without configuring every option at once.

 

  1. Open Control > AI > AI Profiles and choose the profile that should control the news summary behaviour.
  2. Configure the News Design Element panel with at least one section, at least one time frame, and a valid default time frame.
  3. Set a sensible maximum number of article summaries and pick the sort order that matches the editorial use case.
  4. Decide whether topic personalisation should be available and, if so, which topics readers can choose from.
  5. Add a No News Message so the component stays useful when no matching content is available.
  6. Publish or place the design element, then test it with at least one broad time frame and one narrow filter.

 

Start broad on the first pass. Get one summary working with one AI Profile before you tune topics, tooltips, styling, or security combinations.

3. Best Practices

Keep the initial setup simple. Start with a broad section scope, one or two time frames, and a manageable article volume before you add personalisation complexity.

 

Treat the News Design Element as a summary layer, not a replacement for editorial judgment. The output quality depends on the underlying article summaries, the profile instructions, and the filters you apply.

 

Use clear topic sets. If topic personalisation is enabled, offer a small set of meaningful topics rather than trying to expose every taxonomy option.

 

Test both the empty state and the rich state. A configurable No News Message is part of the reader experience, not an afterthought.

 

Review the output on smaller screens. 9.0.11 improved the filter and layout behaviour considerably, but the right topic and time-frame choices still matter for readability.

4. Configure the AI Profile

The News Design Element is configured from the AI Profile, so this is the first place to look when the component behaves unexpectedly.

 

In the News Design Element panel, set:
- the sections the summary is allowed to read from
- the guest and logged-in article security clearances
- the News Prompt that tells the AI how to shape the digest
- the maximum number of article summaries to include
- the sort order
- the initial character display limit

 

Validation requires at least one time frame and a default that is included in the allowed set. If the component is not generating what you expect, review the AI Profile before you assume the front-end element is at fault.

5. Set up time frames, topics, and audience controls

Time frames and topics are what make the News Design Element feel dynamic rather than static.

 

The AI Profile can expose multiple time frames such as Today, This Week, 30 Days, or 1 Year, while also setting a default view. Readers can then narrow what they see without requiring a new manual summary.

 

Topics Available lets you define up to ten reader-facing topic choices for personalisation. Use this when you want returning users to shape the summary around subjects they care about most.

 

Guest and Logged-In security clearances let you control which underlying article summaries are eligible for each audience. This is important when logged-in users are entitled to see more than public readers.

 

If your summary looks too broad, tighten the section scope or time-frame set before you start rewriting the prompt. If it looks empty too often, widen the time frame or review the security filters.

6. How summary generation and caching work

The News Design Element does not regenerate the summary on every page load. In 9.0.11 it uses a smarter caching model so the experience stays fast while still reflecting content changes.

 

Guest and bot users receive a shared cached summary for each time frame. Logged-in users with topic preferences can receive their own personalised cached view. The system checks cache freshness on a short interval, and it also invalidates summaries when relevant content changes inside the selected filters.

 

This means a good setup gives you two benefits at the same time: fewer unnecessary waits for readers and more confidence that the summary reflects recent content. If you see a stale summary, check whether new matching content actually landed inside the configured scope before you change anything else.

7. Configure tooltip, no-news, and display behaviour

The News Design Element now has more control over how the summary is presented after it is generated.

 

You can configure:
- a No News Message for empty states
- Summary Tooltip content
- Summary Tooltip Type with None, Overlay, or Persistent behaviour
- the initial character display limit for longer summaries

 

If the summary is long, the component can expose a Continue Reading style expansion path instead of showing everything up front. This is useful when the summary needs more context but you still want the page to scan cleanly.

 

Use tooltip text sparingly. It works best when it explains what the summary is or how the filters affect it, not when it repeats the summary itself.

8. Understand filters, topics, and reader personalisation

The 9.0.11 front-end refinements matter because they changed the component from a rigid output block into a more interactive reader experience. Topic pills now wrap better on small screens, the date-range dropdown behaves more predictably, and selected topics feed back into the AI prompt so the summary emphasises the chosen subjects rather than merely filtering them.

 

That last point is important. Topic filtering does not just hide articles. It actively changes what the AI gives weight to in the summary.

 

If readers report missing content, check whether topic indexing is enabled and whether the selected topic is actually represented in the eligible article set. If readers report awkward emphasis, review the available topics and prompt framing rather than adding more topics by default.

9. Plan rollout, testing, and ownership

Roll out the News Design Element in stages. Start with one AI Profile, one page context, and a small set of editorial owners who can judge whether the summaries are useful.

 

Test three states before you treat the setup as complete:
- a broad time frame with plenty of eligible content
- a narrow or topic-filtered view
- an empty state that should show the No News Message

 

Keep ownership clear between editorial and configuration teams. Editorial owners should judge whether the summary is useful and on-brand. Configuration owners should manage profile settings, topic availability, and security behaviour.

 

If you change prompts, topics, time frames, and style all together, you make it much harder to understand why the component improved or regressed. Change one layer at a time.

10. Related AI workflows

The News Design Element works best when the rest of the AI stack is healthy. Weak article summaries, vague AI Profile instructions, or poor prompt discipline can all lower the quality of the final digest.

 

Use these related guides when you need to improve the surrounding workflow:
- Affino AI Guide for the overall AI surface
- AI Profiles Guide for model, prompt, and governance setup
- Article Summaries and Sharelines Guide for the source summaries that may feed the digest
- Centralised Prompt Management Guide when the issue starts at the shared prompt layer

 

Treat the News Design Element as one consumer of the AI Profile, not an isolated feature.

11. Tips, troubleshooting, and what to avoid

Use this checklist before you assume the News Design Element is broken.

 

  • If no summary appears, check section scope, time frame selection, and audience security filters before you change the prompt.
  • If the wrong topics are emphasised, check the available topics and the user's selections. Topic choice now influences prompt weighting, not just filtering.
  • If summaries feel stale, check whether matching content has actually changed since the last cache entry.
  • If mobile behaviour feels cramped, review the topic count and filter complexity rather than assuming the layout system is the problem.
  • If the empty state looks poor, add or improve the No News Message instead of leaving the component blank.
  • Avoid exposing too many topics, too many time frames, or an overly broad article set on the first rollout. Complexity is easier to add than remove.

 

The cleanest fixes usually come from tightening scope, not from adding more prompt text.

12. Related guides and next steps

If you are introducing the News Design Element as part of a wider AI rollout, do the next layer of work in this order:

 

  1. Finalise the AI Profiles Guide so ownership, prompt strategy, and model choices are clear.
  2. Review the Affino AI Guide so the wider team understands where this component sits in the overall platform.
  3. Review the Article Summaries and Sharelines Guide if the underlying content quality needs work.
  4. Review the Centralised Prompt Management Guide if the same issue is appearing across multiple AI surfaces.

 

That sequence keeps the component grounded in the wider AI operating model rather than treating it as a one-off page widget.

2. Quick Start

Use this path when you want to get a News Design Element working without configuring every option at once.

 

  1. Open Control > AI > AI Profiles and choose the profile that should control the news summary behaviour.
  2. Configure the News Design Element panel with at least one section, at least one time frame, and a valid default time frame.
  3. Set a sensible maximum number of article summaries and pick the sort order that matches the editorial use case.
  4. Decide whether topic personalisation should be available and, if so, which topics readers can choose from.
  5. Add a No News Message so the component stays useful when no matching content is available.
  6. Publish or place the design element, then test it with at least one broad time frame and one narrow filter.

 

Start broad on the first pass. Get one summary working with one AI Profile before you tune topics, tooltips, styling, or security combinations.

3. Best Practices

Keep the initial setup simple. Start with a broad section scope, one or two time frames, and a manageable article volume before you add personalisation complexity.

 

Treat the News Design Element as a summary layer, not a replacement for editorial judgment. The output quality depends on the underlying article summaries, the profile instructions, and the filters you apply.

 

Use clear topic sets. If topic personalisation is enabled, offer a small set of meaningful topics rather than trying to expose every taxonomy option.

 

Test both the empty state and the rich state. A configurable No News Message is part of the reader experience, not an afterthought.

 

Review the output on smaller screens. improved the filter and layout behaviour considerably, but the right topic and time-frame choices still matter for readability.

4. Configure the AI Profile

The News Design Element is configured from the AI Profile, so this is the first place to look when the component behaves unexpectedly.

 

In the News Design Element panel, set:
- the sections the summary is allowed to read from
- the guest and logged-in article security clearances
- the News Prompt that tells the AI how to shape the digest
- the maximum number of article summaries to include
- the sort order
- the initial character display limit

 

Validation requires at least one time frame and a default that is included in the allowed set. If the component is not generating what you expect, review the AI Profile before you assume the front-end element is at fault.

5. Set up time frames, topics, and audience controls

Time frames and topics are what make the News Design Element feel dynamic rather than static.

 

The AI Profile can expose multiple time frames such as Today, This Week, 30 Days, or 1 Year, while also setting a default view. Readers can then narrow what they see without requiring a new manual summary.

 

Topics Available lets you define up to ten reader-facing topic choices for personalisation. Use this when you want returning users to shape the summary around subjects they care about most.

 

Guest and Logged-In security clearances let you control which underlying article summaries are eligible for each audience. This is important when logged-in users are entitled to see more than public readers.

 

If your summary looks too broad, tighten the section scope or time-frame set before you start rewriting the prompt. If it looks empty too often, widen the time frame or review the security filters.

6. How summary generation and caching work

The News Design Element does not regenerate the summary on every page load. It uses a smarter caching model so the experience stays fast while still reflecting content changes.

 

Guest and bot users receive a shared cached summary for each time frame. Logged-in users with topic preferences can receive their own personalised cached view. The system checks cache freshness on a short interval, and it also invalidates summaries when relevant content changes inside the selected filters.

 

This means a good setup gives you two benefits at the same time: fewer unnecessary waits for readers and more confidence that the summary reflects recent content. If you see a stale summary, check whether new matching content actually landed inside the configured scope before you change anything else.

7. Configure tooltip, no-news, and display behaviour

The News Design Element now has more control over how the summary is presented after it is generated.

 

Configure:
- a No News Message for empty states
- Summary Tooltip content
- Summary Tooltip Type with None, Overlay, or Persistent behaviour
- the initial character display limit for longer summaries

 

If the summary is long, the component can expose a Continue Reading style expansion path instead of showing everything up front. This is useful when the summary needs more context but you still want the page to scan cleanly.

 

Use tooltip text sparingly. It works best when it explains what the summary is or how the filters affect it, not when it repeats the summary itself.

8. Understand filters, topics, and reader personalisation

The front-end refinements matter because they changed the component from a rigid output block into a more interactive reader experience. Topic pills now wrap better on small screens, the date-range dropdown behaves more predictably, and selected topics feed back into the AI prompt so the summary emphasises the chosen subjects rather than merely filtering them.

 

That last point is important. Topic filtering does not just hide articles. It actively changes what the AI gives weight to in the summary.

 

If readers report missing content, check whether topic indexing is enabled and whether the selected topic is actually represented in the eligible article set. If readers report awkward emphasis, review the available topics and prompt framing rather than adding more topics by default.

9. Plan rollout, testing, and ownership

Roll out the News Design Element in stages. Start with one AI Profile, one page context, and a small set of editorial owners who can judge whether the summaries are useful.

 

Test three states before you treat the setup as complete:
- a broad time frame with plenty of eligible content
- a narrow or topic-filtered view
- an empty state that should show the No News Message

 

Keep ownership clear between editorial and configuration teams. Editorial owners should judge whether the summary is useful and on-brand. Configuration owners should manage profile settings, topic availability, and security behaviour.

 

If you change prompts, topics, time frames, and style all together, you make it much harder to understand why the component improved or regressed. Change one layer at a time.

10. Related AI workflows

The News Design Element works best when the rest of the AI stack is healthy. Weak article summaries, vague AI Profile instructions, or poor prompt discipline can all lower the quality of the final digest.

 

Use these related guides when you need to improve the surrounding workflow:
- Affino AI Guide for the overall AI surface
- AI Profiles Guide for model, prompt, and governance setup
- Article Summaries and Sharelines Guide for the source summaries that may feed the digest

 

Treat the News Design Element as one consumer of the AI Profile, not an isolated feature.

11. Tips, troubleshooting, and what to avoid

Use this checklist before you assume the News Design Element is broken.

 

  • If no summary appears, check section scope, time frame selection, and audience security filters before you change the prompt.
  • If the wrong topics are emphasised, check the available topics and the user's selections. Topic choice now influences prompt weighting, not just filtering.
  • If summaries feel stale, check whether matching content has actually changed since the last cache entry.
  • If mobile behaviour feels cramped, review the topic count and filter complexity rather than assuming the layout system is the problem.
  • If the empty state looks poor, add or improve the No News Message instead of leaving the component blank.
  • Avoid exposing too many topics, too many time frames, or an overly broad article set on the first rollout. Complexity is easier to add than remove.

 

The cleanest fixes usually come from tightening scope, not from adding more prompt text.

12. Related guides and next steps

If you are introducing the News Design Element as part of a wider AI rollout, do the next layer of work in this order:

 

  1. Finalise the AI Profiles Guide so ownership, prompt strategy, and model choices are clear.
  2. Review the Affino AI Guide so the wider team understands where this component sits in the overall platform.
  3. Review the Article Summaries and Sharelines Guide if the underlying content quality needs work.

 

That sequence keeps the component grounded in the wider AI operating model rather than treating it as a one-off page widget.

Did you find this content useful?

Thank you for your input

Thank you for your feedback

Product Version

Version 9.0.11.22
VIEW
Affino

Driving business at some of the world's most forward thinking companies

Our Chosen Charity

Humanity Direct