Preview URL not completely used

[Lars]

I am trying to use https://localhost:5173/events/* as my preview URL, but the editor sticks with the base-part, dropping the appended path. It’s adding the targeting path, but the preview URL is not completely used. Why does this happen ? Is there a way I can add a path to the preview URL without changing my targeting ?

[Andreas]

Hi Lars,

Rather than using a wildcard *, I would try changing the Preview URL of your model to just be https://localhost:5173 :

and then under the Advanced tab, adding a url path prefix of /events/

Hopefully this is helpful. Also if you want to do a deeper dive on dynamic urls I’d recommend checking out this documentation: Dynamic Preview URLs - Builder.io

[Lars]

Perfect, that’s it ! Thank you

[Lars]

Wait, it’ still not used in the preview URL:

I still need to change it manually:

The targeting can’t be changed because the URL will change as end-users select events.

[Andreas]

Hi Lars,

I noticed that the model had not been updated and saved to use the /events/ URL Path prefix so I took the liberty to make that change in your space. It will apply to all new backoffice pages, and while it won’t update existing backoffice pages, you can click in and edit the Page url and it will update to /events/your_page_name format.

Please let me know if this isn’t working for you or if there’s anything else I can help with.

Thanks,
Andreas
Customer Engineer at Builder

[Lars]

ahaaa, wow, thank you

Yea, I thought the prefix is appended, but it seems that I gotta include it in the page url.

But there is a twist: My client will not find the page as the URL is events/847534978/participants and not /events/participants, I can get a preview if I change the page URL to events/0/participants and save, but…then the client will not fetch anything. Unless event number zero is selected by the end-user.^^

do you know what I mean ?

this might clarify:

async function fetchContent() 
  {
    const segments: string[] = $page.url.pathname.split('/');
    const endpoint: string = segments.pop() || segments.pop();
    content = await getContent({
      model: 'backoffice-pages',
      apiKey: BUILDER_PUBLIC_API_KEY,
      userAttributes: {
        urlPath: '/' + endpoint
      }
    });
  };

why so somplicated ? I need URL parameters:

/events/[slug]/participants
/events/[slug]/waitlist
/events/[slug]/teams
...

and one generic navigation:

{#each items as {label, target, icon}}
        <TabAnchor href={`/events/${$selectedGridRowStore?.[0]?.ID}/${target}`} selected={$page.url.pathname.endsWith(target)} on:click={() => {$showNavigation = false}}>
          <svelte:fragment slot='lead'><Icon style='margin: auto' icon={icon}/></svelte:fragment>
          <span>{label}</span>
        </TabAnchor>
{/each}

[Andreas]

I think what might work for you is using a dynamic URL like this:

and using creating a field called eventId that will populate the dynamic part of the url:

Depending on your use case, you can configure the page to do whatever fetching you need to do with the eventId in the url, maybe it will pull in data for a Data Model with the same eventId, or maybe from your own third party API. Take a look at this forum post for some examples of cool stuff you can do with dynamic urls and data models:
https://forum.builder.io/t/dynamic-blog-article-using-next-js/3613

I highly recommend you check out these docs for more information about this topic:
https://www.builder.io/c/docs/dynamic-preview-urls

[Stephane]

Hi @Lars - wanted to check if the steps provided by my colleague @Andreas led to a resolution of the issue reported?