Custom pages in a 'SiteResponse' site

[Wouter Hendriks]

I'm setting up a site using a JS webdesign (eg based on dev:blankjs).

I want to create a custom page and 'recognize' this page in TS. Normally I would do something like:

  UPDATE PUBLIC MACRO PTR FUNCTION GetPageBody(OBJECT webdesign)
  {
    INSERT "page-assessmentform" INTO webdesign->htmlclasses AT END;

and

dompack.onDomReady(() => {
  if (!document.documentElement.classList.contains('page-assessmentform')) {
    return;
  }

  ...

How can I do this in a JS webdesign?

Or are there new/better ways of doing this in a JS webdesign?

[Arnold Hendriks]

The brand new New way in WH5.7 is probably using setFrontendData for these things on the response:

  setFrontendData<Type extends keyof FrontendDataTypes>(dataObject: Type, data: FrontendDataTypes[Type]) {

picking it up using getFrontendData

*and* declaring the format in your frontend, like wrd:auth does here:

declare module "@webhare/frontend" {

interface FrontendDataTypes {

"wrd:auth": {

/** WRDAuth cookiename (used to verify configuration settings) */

cookiename: string;

};

}

}

This will also replace/be recommended instead of jsobjconfig/jssiteconfig as there is no clean way to get those interfaces to be properly typed in TypeScript

It's still new and experimental (and I think we also need to upgrade it to a typed stringify so you can transfer Money & Date) but I don't expect the interfaces to really change anymore - the concept is trivial and generic enough now.

[Wouter Hendriks]

Ok, thanks, so I can do something like this:

------------------------------------------------------

siteprl:

<filetype namespace="deberoepentuin.nl/filetype/assessmentform"

------------------------------------------------------

entry point TS:

import { SiteRequest, SiteResponse, SiteResponseSettings } from "@webhare/router";

declare module "@webhare/frontend" {
  interface FrontendDataTypes {

    "dbt:test": {
      pageType: string;
    };
  }
}

export async function backendDesign(request: SiteRequest, settings: SiteResponseSettings) {
  const pageconfig = {};
  const response = new SiteResponse(pageconfig, request, settings);
  response.setFrontendData("dbt:test", { pageType: request.targetObject.type });
  return response;
}

------------------------------------------------------

custom page TS:

dompack.onDomReady(() => {
  if (frontend.getFrontendData("dbt:test").pageType === 'deberoepentuin.nl/filetype/assessmentform') {
    console.log('we are on our custom page');
  }

 ...

}

------------------------------------------------------

Not sure if this is the intended way but it works :-)

 

[Arnold Hendriks]

Sure. But I think i'd go for

declare module "@webhare/frontend" {
  interface FrontendDataTypes {

    "dbt:assesmentpage": {
      assessmentTite: string;

      teacherName: string;
    };

    "dbt:dashboardpage": {
      assessments:: Array<AssessmentData>;

    };  

  }

}

to also transport any data for the page.

but maybe that format should only be used for page-level plugins/pageconfig/siteconfig stuff and for page types:

declare module "@webhare/frontend" {
  interface FrontendDataTypes {

    "dbt:page": {
      pageType: "assessment";
      assessmentTite: string;
      teacherName: string;
    } | { 

      pageType: "dashboard";
      assessments: Array<Assessment>

    }

  };
}

const page = getFrontendData("dbt:page")

switch(page.pageType) { 

  case "assesssment": ...

[Wouter Hendriks]

How do I use "getFrontendData" in a site that still uses the 'old' webdesigns, eg not from TS but from whlib?

Can't figure out how to push data to it (something equivalent to `INTO this->webdesign->jsobjconfig`?).

Maybe parse `<script type="application/json" id="wh-config">` myself?

[Arnold Hendriks]

On Friday, January 24, 2025 at 11:14:40 AM UTC+1 Wouter Hendriks wrote:

How do I use "getFrontendData" in a site that still uses the 'old' webdesigns, eg not from TS but from whlib?

 

Can't figure out how to push data to it (something equivalent to `INTO this->webdesign->jsobjconfig`?).

Use webdesign->SetFrontendData.

 

Maybe parse `<script type="application/json" id="wh-config">` myself?

That would be reading the data, not setting it ?

[Wouter Hendriks]

Funny, I've already tried that. Probably did something wrong. Thanks.

So, this works:

WHLIB 

PUBLIC OBJECTTYPE ... EXTEND WebDesignBase
<

  ...
    this->SetFrontendData("mymodule:site", [ siteroot := this->targetsite->webroot ] );

  ...

JS:

import { getFrontendData } from "@webhare/frontend";
console.log(getFrontendData("mymodule:site"));

=> 

object with "siteroot"