Hi there, I’m trying to implements the tags functionality in my builder page in next.js, So I want a another dynamic tags page which shows the blogs according to tag and on the single blogs page they must have tags in it. which linked to the specific tags page
How Do I make the fields of tags which can work as mention above?
Also, I’m getting builder error if I try to make a field of type list then another field of type refrence in it. please resolve it. here is the screenshot of error.
Hi @anupama.sharmaa while you can create a model for pages of tagged articles in Builder, this may be better handled dynamically in your Next.js app. Here is some sample pseudocode for how that [tags].tsx page might look like:
function Tags({articles}) {
return (
// map through tagged articles
)
}
// Get all articles with the tag
export async function getStaticProps(context: any) {
const articles = builder.getAll('blog-article', {
options: {
noTargeting: true,
},
query: {
'data.tags': context.params!.tag,
},
})
return {
articles: articles,
}
}
// Generate paths for all tags
export async function getStaticPaths() {
// get the tags dynamically by performing another fetch from Builder
// or define them in here:
const tags = ['tag1', 'tag2', 'tag3']
const paths = tags.map((tag: string) => ({
params: {
tag,
},
}))
return {
paths,
fallback: true,
}
}
You may also find this article I found online helpful: Creating Dynamic Tag Pages With NextJS Nested Routes - Bionic Julia
As for the list field type with a reference input, I wasn’t able to reproduce the error. Can you please share the content link of the page in your screenshot above? Thanks!
here is the link of error: Builder.io: Drag and drop page builder and CMS
Above Solution is good, but I want to give ability to the builder client to make his own tags and so he can use those tags in his blogs page.
When ever the client gives the tags to the blog page, there must be suggestions of all created tags in the field or client can able to choose only defined tags.
That’s why I try to make list field type with reference input, so he can only choose the defined tags and there will no any spelling differences.
So This approach is more predictable then letting the client fill the tags by his own on every blog page.
After these all completes, Then I will use your above method to fetch tags pages on front end.
Thanks
@anupama.sharmaa I would also call out, you can have the input type be an enum with a pre-defined set of inputs, as opposed toa list of references. You can see docs on it here: Using Your React Components in Builder.io - Builder.io.
See if that works for your use case!
I want to implement enum type field in builder model. Can you please tell which type of field should I use.
@anupama.sharmaa in your Model page, you can set the input to be a type text, and under More Options there is the flag to make the input an enum value:
Try that out!
Hey @TimG, I tried the way you said and that’s worked, but I want a client oriented option because the client has no developer background and I don’t want to let him change with the models because It can generate some unwanted errors.
Please let me know if there is an alternate option for this, so client can handle easily
Hi @anupama.sharmaa Could you clarify your last question, what about using the enum option would be too developer-focused or error prone ? As long as it is defined on the model page, they shouldn’t be able to edit or change any tag selections on the content pages. You could also make it a list of enum selections as well, image attached:
Also, only Admins should have ability to edit the model to change enum tags. Do you think that would work for your clients?
Hi @TimG What I want is like client can only choose between defined tags. but he can easily defined these tags in a separate place not directly in to the model field.
@anupama.sharmaa Hmm yes…that makes sense. If you do not want the users to have access to edit the model, but want them to create a new Tag data model entry, then yes…I think using a tag data model which is referenced in the list should work with the suggestions from @ancheetah above. Let us know if you run into any other issues or questions while implementing!
Side note, make sure to include the options: { includeRefs: true } in your builder.get(), builder.getAll() and s as that will make sure the data from the tags is included along with the reference ID
Hi @TimG, I already tried the way you said and try it again but builder gives me same error again.
Let me tell you with the screenshots
here are my fields of type list and have sublist as reference type -
The Error builder gives me when I tried to fill the fields is here -
Please let me know If do something wrong and help me.
Thank you.
Hi @anupama.sharmaa, I created the same type of field in my test space and I’m not able to reproduce this behavior. Can you please send a content entry link to a page that uses your custom field so I can take a look? It should start with https://builder.io/content/. Thanks!
Hi @ancheetah,
I’m getting the error again -
Here are the links -
public api key - fff8e6fa6fbc4f6abf4fb93c03e661f1
Hi @anupama.sharmaa, I tried creating a test entry in your blogPage model and I am able to add values successfully for the relatedBlogs and tags fields. Are there any additional relevant errors in the browser console? Could you also share some details about your environment (the browser name and version you’re using, and the operating system of the computer where this occurs)? Thanks!
Hi @ancheetah, Thank you so much for your help It’s working now.
but, When I try to fetch the reference type field then I get the lots of unnecessary data from there let me show a screenshot of it -
So these are the data object I’m getting, I only need the object I marked as red in picture and all others are useless to me.
Can I just limit my fetch to the marked object only?
Hey @anupama.sharmaa glad it’s working now! Yes you can use the fields option to limit the response returned. You can play around with it in our interactive Content API explorer here.
