Headless Widgets - Rendered Code? Where to Get it?

26 views
Skip to first unread message

Alex

unread,
May 9, 2022, 1:27:52 PMMay 9
to dotCMS User Group
Dear group members:

Thank you to anyone who can provide guidance!

Can anyone enlighten me on how I can retrieve the rendered code of a widget on graphql?

I have read this case https://github.com/dotCMS/core/issues/21079 it seems like I have to create a list and store values there and put it in a field, but there is no clear guidance as how this works or how I should retrieve the data.

Here is a graphql request for Banner Carousel Collection in the Demo Site. None of its fields returns a rendered widget.

query ContentAPI {
BannerCarouselCollection(query: "", limit: 10, offset: 0, sortBy: "score") {
    identifier
  widgetCode
    banners {
      title
      styles
      layout
      caption
      buttonText
      link
      textColor
      widgetCodeJSON
      identifier
      modDate
      baseType
      inode
      archived
      _map
      urlMap
      working
      locked
      contentType
      live
    }
  widgetCodeJSON(render:true)
  _map
   
  }
}

Here is the output:

{
  "data": {
    "BannerCarouselCollection": [
      {
        "identifier": "a46b2b68-877a-4010-8216-55b1b394f743",
        "widgetCode": "#dotParse('/application/vtl/carousel/banner-carousel.vtl')",
        "banners": [],
        "widgetCodeJSON": {},
        "_map": {
          "publishDate": 1599065204377,
          "language": {
            "languageId": 1,
            "language": "English",
            "languageCode": "en",
            "country": "United States",
            "countryCode": "US",
            "languageFlag": "en_US",
            "isoCode": "en-us",
            "id": 1
          },
          "inode": "4a59802f-e5bd-4293-931d-98b174806b68",
          "path": "/content.efd6722e-bec9-4572-a0bf-3e7ab0f09173",
          "host": "48190c8c-42c4-46af-8d1a-0cd5db894797",
          "locked": false,
          "stInode": "73061f34-7fa0-4f77-9724-5ca0013a0214",
          "contentType": "BannerCarousel",
          "identifier": "a46b2b68-877a-4010-8216-55b1b394f743",
          "banners": [],
          "widgetTitle": "Destinations",
          "folder": "SYSTEM_FOLDER",
          "hasTitleImage": false,
          "sortOrder": 0,
          "hostName": "demo.dotcms.com",
          "modDate": 1599065204377,
          "title": "Destinations",
          "baseType": "WIDGET",
          "archived": false,
          "working": true,
          "live": true,
          "owner": "dotcms.org.1",
          "languageId": 1,
          "widgetCodeJSON": {},
          "url": "/content.efd6722e-bec9-4572-a0bf-3e7ab0f09173",
          "titleImage": "TITLE_IMAGE_NOT_FOUND",
          "modUserName": "Admin User",
          "hasLiveVersion": true,
          "modUser": "dotcms.org.1",
          "widgetCode": "#dotParse('/application/vtl/carousel/banner-carousel.vtl')"
        }
      }
    ]
  }
}

Daniel Silva

unread,
May 9, 2022, 5:33:30 PMMay 9
to dotCMS User Group
Hello Alex, 

I put that example on demo to work. Try hitting the query again. 

The way to proceed here was by editing the `banner-carousel.vtl` and assign, in velocity code, anything you want to return to the $dotJSON object, so it comes in the `widgetCodeJSON`. 

I'm pasting here the content of the modified `banner-carousel.vtl`:


Daniel

Daniel Silva

unread,
May 9, 2022, 5:43:15 PMMay 9
to dotCMS User Group
If you only want the widget code rendered (not exclusively JSON, as the widgetCodeAsJSON does) you could do:

widgetCode(render: true) and in that case you wound't need to use the widgetCodeAsJSON nor make any modifications to the `banner-carousel.vtl`

Daniel

Alex

unread,
May 10, 2022, 12:34:52 PMMay 10
to dotCMS User Group
Dear Daniel:

Thank you so much for the explanation!  

I am sorry I still have trouble understanding it.

I went ahead and kept on playing in the demo.  When I try to get the rendered code I just get the HTML and not the values.  For example:

query ContentAPI {
  FaqWidgetCollection(query: "+title:*", limit: 10, offset: 0, sortBy: "score") {
    title
    urlMap
    widgetCode(render:true)
  }
}

The output of the field widgetCode only outputs HTML with no values set on the widget. (see image that I attached).  Also, in the community edition, what I get is what is contained in the field (#dotparse and path to VTL file).  Is the Community Edition prohibited from this feature?
{
  "data": {
    "FaqWidgetCollection": [
      {
        "title": "Costa Rica FAQ",
        "widgetCode": "<h2></h2>\n\n<div class=\"card-group-custom card-group-corporate\" id=\"accordion1\" role=\"tablist\" aria-multiselectable=\"false\">\n    </div>"
      }
    ]
  }
}

Screen Shot 2022-05-10 at 10.09.04 AM.png

Daniel Silva

unread,
May 10, 2022, 1:02:04 PMMay 10
to dotCMS User Group
Hey Alex, 

The <h2> is empty because the underlying #set($faqList = $dotcontent.pullRelated("FaqWidget.faq","7c9cb3a7-bb68-4fd0-b21d-03ec4be491a7",false,0)) was returning nothing, hence empty list. 
I fixed it by sending the correct second argument (content identifier) and it is now pulling the results and filling the <h2>. 

Also demo is on Community Edition now. 

Results: 


Screen Shot 2022-05-10 at 11.57.59.png


Daniel

Daniel Silva

unread,
May 10, 2022, 1:09:38 PMMay 10
to dotCMS User Group
Alex, 

By my last comment I meant what was inside the <div>. The <h2> is also fixed now by using contentlet.title instead of widgetTitle in the velocity code

"widgetCode": "<h2>Costa Rica FAQ</h2>...

Daniel

Alex

unread,
May 10, 2022, 2:54:47 PMMay 10
to dotCMS User Group
Dear Daniel:

Thank you so much for the in-depth explanation!  It is now very clear.

Regards,

Alex



Reply all
Reply to author
Forward
0 new messages