Getting & Displaying current Page Title with Codeless

[KLoic]

How can I capture the current page title using codeless. Can anyone please show me an example and which I block I would need to put together?

Thanks in advance.

[Nikita_Fedorishchev]

Hello, @KLoic.

You can work with page parameters in the components section.

What exactly do you need to get?
Please describe your goal in more detail.

Best regards, Nikita.

[KLoic]

Hi @Nikita_Fedorishchev,

I would like to first capture this page title displayed here and then split the text to only capture the number at the end.

Thank you!!

[vladimir-upirov]

Hello @KLoic

you can use the “Page Title Logic” logic to change it dynamically

For instance, you can bind it to the Page Data model and then change it from anywhere

Regards, Vlad

[KLoic]

Hi again,

Here is what I would like to do:

1. Create a Timer that will run at x interval
2. Create a copy of a page directory under this path: /files/ui-builder/containers/default/pages
3. Rename the newly copied directory
4. Change the Page-Title of the index.html page. I mean rename the page title what we see here in the UI builder:

I managed to do step 1 to 3. I have no clue if it’s possible to do 4 with a Timer. Is it possible to access the Page Title with a codeless timer?

Thanks in advance.

cc @vladimir-upirov @Nikita_Fedorishchev

[vladimir-upirov]

Could you please tell us what’s the purpose of generating UI-Builder pages using Business Logic, I’m asking because it is a little bit beyond the main pattern of the UI-Builder

[Tom_Van_den_Eynde1 (Tom Van den Eynde)]

I think the question is how to retrieve the page title which was set through the property panel. I’m trying to auto update a text component in a layout based on the Title value set of a page using the layout.

[vladimir-upirov]

Hi @Tom_Van_den_Eynde1

Setting the page title is a one-way operation, we do not keep it in any DataModel to avoid additional rerenders.

However, there are a few points which can help you to solve your issue:

1. since it is set to the document.title you can read the value using the CustomCode codeless block, but pay attention to setting a new title doesn’t trigger a new value and in the logic, you will not always get up to date value.

2. the following approach is more complicated but you can be sure you will always get fresh value

• for a layout we have to add 2 handlers (Before Enter and After Leave)
• in the Before Enter handler we subscribe to changing the title in the DOM and put the value into the Layout Data
• since changing LayoutData triggers a new rerender we can use the title value in any logic
• once we leave the layout we unsubscribe the listener

// Function to be called when document.title changes
function onTitleChange(mutationsList, observer) {
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
          // Sets the new value into the Layout Data Model to initiate a new render phase 
          layoutData.documentTitle = document.title
        }
    }
}

// Create a new instance of MutationObserver, passing it the callback function
const observer = new MutationObserver(onTitleChange);

// Options for the observer (what mutations to observe)
const config = { childList: true };

// Target node to observe (the <title> element)
const targetNode = document.querySelector('title');

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Keep refernce to the observer to be able to stop it when the Layout unmount
layoutData.titleChangeObserver = observer

if(layoutData.titleChangeObserver){
  layoutData.titleChangeObserver.disconnect();
  
  delete layoutData.titleChangeObserver
}

Regards,
Vlad

[Tom_Van_den_Eynde1 (Tom Van den Eynde)]

I found an easier way by ‘abusing’ the page name. The text field containing the page title got the following logic: