UVE: Future Time Machine

[dotCMS-Machine-User]

The Future Time Machine lets you preview your dotCMS pages as they'll appear on any future date. Eliminate uncertainty by seeing scheduled content changes in context. Simply select a date, language, and user persona to visualize your page's future, ensuring perfect content timing and presentation.

Ask from customer Newell and partner DSS.

User stories

• [User story 1]
• [User story 2]

Enablement

• Documentation: [link]
• Field enablement training: [link]
• Technical enablement training: [link]
• Positioning FAQ responses: [link]
• Initial demo script: [link]
• Initial demo video: [link]

Definition

• Reverse press release (RPR)
• Product requirements document (PRD)
• Design specification: [link]

Ideation

• Ideation document: [link]
• Video explaining some tech constrains
• Low-fidelity wireframes or prototypes - (video)

Research and competitive analysis

• [Link 1]
• [Link 2]

[nollymar]

Spike: #29816

Epic for BE implementation: https://github.com/dotCMS/core/issues/30554

[KevinDavilaDotCMS]

WIP - Future Time Machine

Findings

• FTM is the representation of future versions of the contentlets that a page has related to it, not the page itself.
• The dotCMS instance must have the following Feature Flag enabled

  TZ: UTC

• To retrieve FTM data, a queryParam needs to be added to the PageAPI service. Example URL:

  http://localhost:8080/api/v1/page/json/blog?language_id=1&mode=LIVE&tm_date=2024-09-30T13:45:00Z

  ^{The tm_date parameter must be a date in ISO 8601 format}

Constrains

• FTM should display the LIVE version and only in PREVIEW mode. The page will not be editable in this mode.
• FTM must work under a Feature Flag.
• FTM should operate through queryParams. When implementing this mechanism, it may be possible to include the logic to also manage Preview | Orientation | Social Media seetings via queryParams
• If the user enters directly to the UVE link and already has the tm_date queryParam, it should open with the FTM option selected and with the date selector synchronized on that date.

Links

Figma design

Backend Spike

PRD Document

Approach

Currently we manage part of the UVE state guided by the queryParams, since we manually added the following queryParams to the pageApi service

• Language Id
• VariantName
• Experiment Id
• Depth
• Mode If another queryParam exists, it is ignored and not added to the PageApi service. We can manually add the queryParam tm_date to add it to the service and thus obtain the FTM response.

        const pageApiUrl = createPageApiUrlWithQueryParams(url, {
            language_id: params.language_id,
            'com.dotmarketing.persona.id': params['com.dotmarketing.persona.id'],
            variantName: params.variantName,
            experimentId: params.experimentId,
            depth: params['depth'] || '0',
            mode,
            tm_date: isFTMEnaled ? params['tm_date'] : null
        });

In this way we can synchronize the UVE information with the FTM response.

If we have FTM active, the toolbar shown in UVE will have a different design than the current Toolbar. Both in design and functionality, since we will have a date selector to indicate the FTM date.

All of this will work under a FF, so this FF, along with the queryParam, will be the indicator of which toolbar to display and if FTM should be rendered

The suggested flow for this would be:

• Check if the FTM FF is on.
• If it is, render the FTM version Toolbar.
• If the user clicks the button to access FTM, the queryParam will be added and it will be synchronized with the value of the Toolbar's date selector.

The queryParam value will also be added to the PageAPI query.

• While the user is in FTM, the page will be in PREVIEW mode and will not be editable.

These changes involve modifying the current UveStore, as well as the handling of queryParams. It is not necessary to create a new Store or affect the current operation of Orientation/Preview/Social media.

By already having a Toolbar component with the current functionality, we can use it as a wrapper and render one layout or another according to the FF, maintaining the same functionality.

<p-toolbar>
    @if(isFTMEnabled) {
        // new design
    } @else {
        // current design
    }
</p-toolbar>

Tasklist

• [ ] https://github.com/dotCMS/core/issues/30459
• [ ] https://github.com/dotCMS/core/issues/30460