Why does code custom field gets parsed as a string?

Technical Questions
1

What are you trying to accomplish
I’m trying to set my title dynamically, using a part of my URL.
Im using the code (javascript) custom field.
What happens is that the javascript code i write in the code field gets parsed as is (as a string)

for example, if i use the variable with the value of “awesome”, and i write in the code block:

Some ${variable} title

the title i get is “Some ${variable} title”
instead of getting - “Some awesome title”

any suggestions?

Code stack you are integrating Builder with
NextJS

2

Hi @neri,

Welcome to the builder.io forum.

You can try using Template literals (Template strings)

For e.g.

image
image1416×232 12.9 KB

If the above doesn’t help then kindly help us with the complete code and builder content link so we can provide you with an exact solution. Thank you!

3

Hi manish-sharma, thanks for the reply.

Here’s an example with code:

On my builder page i created a page field called testField. it’s type is code.

For this example i put in the value - string is ${1 + 2}
I would expect the value that would be geberated to be “string is 3” but i get the value of -string is ${1 + 2}

image

in my NextJs app i added a console.log with page.data.testField in it.
the printed value to the console is as i metioned above: string is ${1 + 2}

My NextJS code is:

builder.init(builderConfig.apiKey);

export async function getStaticProps({
  params,
}: GetStaticPropsContext<{ practice: string; stateName: string }>) {
  const page = await builder
    .get("local-page", {
      url: `/lawyer/${params?.practice}/${params?.stateName}`,
    })
    .promise();

  return {
    props: {
      page: page,
    },
  };
}

export async function getStaticPaths() {
  const localPages = await builder.getAll("landing-page-data");

  const paths: PathsType[] = [];

  localPages.forEach((page) => {
    const x = page?.data?.x || "";
    page?.data?.states.forEach((y: any) => {
      const xLower = x.toLowerCase();
      const yLower = y.name.toLowerCase();
      paths.push({ params: { x: xLower, y: yLower } });
    });
  });

  return {
    paths,
    fallback: true,
  };
}

export default function Page({
  page,
}: InferGetStaticPropsType<typeof getStaticProps>) {

  console.log(page?.data?.testField); // Output: `string is ${1 + 2}` 😔

  return (
      <BuilderComponent
        model="local-page"
        content={page}
        contentLoaded={(_, content) => {
          eventService.setContext([
            { key: "builder_page_name", value: content.name },
            { key: "test_variation_name", value: content.testVariationName },
            { key: "test_variation_id", value: content.testVariationId },
          ]);
        }}
      />
  );
}
4

Hi @neri,

You can execute the string as javascript code with the eval function

console.log("Test Field", eval(page?.data?.testField));

5

So the testField code needs to be executed in my code?

I thought that the meaning of the code field in that it get’s automatically executed by builder and i get the output value

6

Hi @neri,

Builder code fields on a get call returns code format in a JSON string and you will need to execute on your end or in the builder editor.

1 Like