Dynamic Page Title in SOFTR Databases

Custom Coding
1

Just did this on a page. The custom code block is very strictly to logged in users so the code can’t be seen by just anyone…

<script>
  // Set the <title>
  const setPageTitle = (t) => (document.title = t);
  // Read ?recordId=... from the URL
  const params = new URLSearchParams(location.search);
  const recordId = params.get("recordId");
  // Softr Tables API config
  const DATABASE_ID = "YOUR DATABASE ID";
  const TABLE_ID    = "YOUR TABLE ID";
  const API_KEY     = "YOUR API KEY"; // ⚠️ make sure this block is a secure page!
  if (!recordId) {
    console.error("No recordId in URL");
  } else {
    fetch(
      `https://tables-api.softr.io/api/v1/databases/${DATABASE_ID}/tables/${TABLE_ID}/records/${recordId}`,
      {
        method: "GET",
        headers: {
          "Softr-Api-Key": API_KEY,
          Accept: "application/json",
        },
      }
    )
      .then(async (res) => {
        if (!res.ok) throw new Error(`Tables API ${res.status}: ${await res.text()}`);
        return res.json();
      })
      .then((json) => {
        const fields = json?.data?.fields || {};
        const title = fields["YOUR FIELD ID TO USE"]; // Job Identifier field ID
        if (title) {
          setPageTitle(title);
        } else {
          console.warn("Field ID not found on record. Fields:", fields);
        }
      })
      .catch((err) => console.error("Fetch error:", err));
  }
</script>

My question is this though. While this actually works is there a better way to do this as I’m still a titchy bit ill at ease having that API key in the code.

2

Indeed :sweat_smile:. There would be a way to use a script without exposing your API Key - which is super dangerous - even with your logged in users.

Though, just one question: the field you want to use to display a dynamic page title would appear in the page itself somewhere? Like inside an item-details block? (I guess I’m referring to the Job Identifier ID).

1 Like
3

Yup, it does. Do you know of an effective way to scrape it from there and use? I would prefer that for sure.

4

Yes,
I’m running out of time, but if you want to try it first, feel free. If it doesn’t work, I’ll dig into it.

Here is the Softr docs page you should check: Custom Code Events and Style Selectors – Softr Help Docs
Then go to “get-record.”

The get-record method allows you to work with record fields of an item-details block without exposing API keys or unnecessary database details.

The idea is the following: by using the get-record event method, you can create a script to update the document title.

Note that you may need to add:

window.addEventListener('block-loaded-ITEM_DETAILS_BLOCK_ID', () => {
   // rest of your script nested here
});

Replace ITEM_DETAILS_BLOCK_ID with the actual item-details block ID.
The reason is that you may need to ensure the item-details block is available before the rest of the script runs.

1 Like
5

Hi Matthieu,

This sounds great. Do you have a full snippet of this?

6

This simple script should do the trick:

<script>
window.addEventListener('block-loaded-item-details1', () => {
  const onRecord = (e) => {
    if (e.detail && e.detail.fields && e.detail.fields.Name) {
      document.title = e.detail.fields.Name;
    }
    console.log(e.detail);
  };

  window.addEventListener('get-record-item-details1', onRecord);
});
</script>

To be added in the page settings, custom code, header.
item-details1 to be changed (twice) with your own item-details block id
In my case, I’m looking for the field “Name” (to be replaced line 3 and 4 - case sensitive)

If your field has spaces you can’t use the dot notation (.Name)
So it would look like this, using bracket notation:

<script>
window.addEventListener('block-loaded-item-details1', () => {
  const onRecord = (e) => {
    if (e.detail && e.detail.fields && e.detail.fields["Job Identifier field ID"]) {
      document.title = e.detail.fields["Job Identifier field ID"];
    }
    console.log(e.detail);
  };

  window.addEventListener('get-record-item-details1', onRecord);
});
</script>
1 Like