Targeting multiple URLs (Add URL Field missing)

Technical Questions
1

Builder content link

Builder public api key
f1d2b6baddb84f8588b038e488011c77

What are you trying to accomplish
I want to add multiple URLs for a Section Element in Targetting. I found this older post:

image

But in my targeting options I can only add URLs with an “AND” but never with an “OR”. The Field to add URLs to one rule is missing.

image
image722×290 14.6 KB

Code stack you are integrating Builder with
NextJS

Thanks for your help!

Andreas

2

Hello Andreas,

At this time, there is no option for an OR operator. I can suggest a few workarounds and provide some information on how Page Entries are served.
The way page entries are served is indicated on your Content page on match.
The URL targeting will travel from top to bottom. In the following screenshot, I’ve indicated that Homepage 2 Specific should be served if the endpoint exists.

D75F863F-BBD1-4228-A1CB-C0EEBC3889C7_4_5005_c
D75F863F-BBD1-4228-A1CB-C0EEBC3889C7_4_5005_c1796×303 59.1 KB

Note: You may change the order by clicking on the horiztontal gray bars I’ve indicated in the hexagonal shape.

Please let me know if this helps you achieve the desired affect.

If this is not feasible for your use case, please let me know and I would be happy to search for another solution.

3

Hi Julius,
thank you for your response. I solved it directly in nextjs.

My goal was to have content displayed on several pages as section. For example an announcement bar or a special side bar.

What I did now was generating a Section Model (The Announcement) and styled it with the fallback Editor.
Next I made a Structured Data Model containing all the links I want to show my announcement bar.

I wrapped my page.tsx in the Announcement.tsx and hand over the current URL.

const Collection = async ({ params }: PageProps) => {
  const urlPath = "/" + (params?.page?.join("/") || "");
  const content = await fetchPageContent(urlPath);

  return (
    <>
      <Announcements urlPath={urlPath}>
        <RenderBuilderContent content={content} model="page" />
      </Announcements>
    </>
  );
};

My Announcement Component fetches the links defined in my Data Model within a next14 server component and checks if the current URL is within this list. If yes, it renders it. If not then not.

interface AnnouncementsProps {
  children: React.ReactNode;
  urlPath: string;
}

const Announcements = async ({ children, urlPath }: AnnouncementsProps) => {
  let announcements;
  const links = await fetchAnnouncementLinks();
  const pagesInLinks = links.includes(urlPath);

  pagesInLinks ? (announcements = await fetchAnnouncements(urlPath)) : null;
  return (
    <>
      {announcements && pagesInLinks && (
        <RenderBuilderContent
          content={announcements}
          model="announcement-bar"
        />
      )}
      {children}
    </>
  );
};

export default Announcements;

For now it looks like a pragmatical solution to me. Static content generation and Server Side Caching is also working fine.

The only thing is, that a clear naming condition and good documentation is necessary, that the users can get the connection between the data object and the announcement object.

So a simple solution in the GUI with an logical OR would be a great feature.

Have a great day,

Andreas