Headless Widgets - Rendered Code? Where to Get it?

[Alex]

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]

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`:

https://gist.github.com/dsilvam/96e08b6b597ab221b2f48595aa09e336

Daniel

[Daniel Silva]

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]

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>"
      }
    ]
  }
}

[Daniel Silva]

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: 

Daniel

[Daniel Silva]

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]

Dear Daniel:

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

Regards,

Alex