Change Custom View from Thumbnail to text - Roku Scenegraph Developer Extension SGDEX

Question

Currently the Customer template in Roku Scenegraph just shows the thumbnail from the grid feed.

I would like to use the full description from the grid feed, instead. How would I go about changing this?

Parse from GridHandler. (Notice the description below. Right now it shows hdPosterUrl. I would like the CustomView to show the Description instead).

''''
function ParseMediaItemToNode(mediaItem as Object, mediaType as String) as Object
itemNode = Utils_AAToContentNode({
        "id": mediaItem.id
        "title": mediaItem.title
        "hdPosterUrl": mediaItem.thumbnail
        "Description": mediaItem.Description
        "Categories": mediaItem.genres[0]
    })
''''

Details View (notice the Custom and thumbnail below. Need to change thumbnail to description)

''''
    if currentItem.url <> invalid and currentItem.url <> ""
        buttonsToCreate.Push({ title: "Play", id: "play" })
    else if details.content.TITLE = "series" 
        buttonsToCreate.Push({ title: "Episodes", id: "episodes" })
    else if details.content.TITLE = "SERIES"
        buttonsToCreate.Push({ title: "Episodes", id: "episodes" })
    end if

    buttonsToCreate.Push({ title: "Custom", id: "thumbnail" })
''''

Calling the ID from the Details view. Again, I need to change hdPosterURL to text / description.

''''
else if selectedButton.id = "thumbnail"
    if details.currentItem.hdPosterUrl <> invalid then
        ShowCustomView(details.currentItem.hdPosterURL)
    end if
else
    ' handle all other button presses
end if
''''

Custom.xml

''''
<?xml version="1.0" encoding="utf-8" ?>
  <component name="custom" extends="Group" >
    <interface>
      <field id="picPath" type="string" alias="thumbnail.uri" />
    </interface>
    <children>
        <Poster id="thumbnail" translation="[0,0]" width="1280" height="720" />
    </children>
</component>
''''

CustomViewLogic.brs

''''
sub ShowCustomView(hdPosterUrl as String)
    m.customView = CreateObject("roSGNode", "custom")
    m.customView.picPath = hdPosterUrl
    m.top.ComponentController.CallFunc("show", {
        view: m.customView
    })
end sub
''''

Answer 1

Marlon: Seems like it could be done via changing files likes this: Change passed and passing param to description CustomViewLogic.brs

sub ShowCustomView(description as String)
m.customView = CreateObject("roSGNode", "custom")
m.customView.fullDesc = description
m.top.ComponentController.CallFunc("show", {
    view: m.customView
})
end sub

Add Label as a child, and delete Poster, as we don't need any poster to show text of description, and add alias for label's text. custom.xml

<?xml version="1.0" encoding="utf-8" ?>
  <component name="custom" extends="Group" >
    <interface>
      <field id="fullDesc" type="string" alias="fullDescription.text" />
    </interface>
    <children>
      <Label id="fullDescription" translation="[0,0]" width="1280" height="720" wrap="true"/>
    </children>
   </component>

rename passed params, button id and button title DetailsViewLogic.brs

sub OnDetailsContentSet(event as Object)
details = event.GetRoSGNode()
currentItem = event.GetData()
if currentItem <> invalid
    buttonsToCreate = []

    if currentItem.url <> invalid and currentItem.url <> ""
        buttonsToCreate.Push({ title: "Play", id: "play" })
    else if details.content.TITLE = "series"
        buttonsToCreate.Push({ title: "Episodes", id: "episodes" })
    end if

    buttonsToCreate.Push({ title: "Description", id: "description" })

    if buttonsToCreate.Count() = 0
        buttonsToCreate.Push({ title: "No Content to play", id: "no_content" })
    end if
    btnsContent = CreateObject("roSGNode", "ContentNode")
    btnsContent.Update({ children: buttonsToCreate })
end if
details.buttons = btnsContent
end sub

sub OnButtonSelected(event as Object)
details = event.GetRoSGNode()
selectedButton = details.buttons.GetChild(event.GetData())

if selectedButton.id = "play"
    OpenVideoPlayer(details.content, details.itemFocused, details.isContentList)
else if selectedButton.id = "episodes"
    if details.currentItem.seasons <> invalid then
        ShowEpisodePickerView(details.currentItem.seasons)
    end if
else if selectedButton.id = "description"
    if details.currentItem.hdPosterUrl <> invalid then
        ShowCustomView(details.currentItem.description)
    end if
else
    ' handle all other button presses
end if
end sub

Answer 2

To do so you should simply add label component to your custom screen and pass the description to custom screen using interface, please see:

Custom.xml

<?xml version="1.0" encoding="utf-8" ?>
  <component name="custom" extends="Group" >
    <interface>
      <field id="picPath" type="string" alias="thumbnail.uri" />
      <field id="textDescription" type="string" alias="label.text" />
    </interface>
    <children>
        <Poster id="thumbnail" translation="[0,0]" width="1280" height="720" />
        <Label id="label" translation="[100,100]" width="1000" wrap="true" />
    </children>
</component>

CustomViewLogic.brs

sub ShowCustomView(hdPosterUrl as String, description as String)
    m.customView = CreateObject("roSGNode", "custom")
    m.customView.picPath = hdPosterUrl
    m.customView.textDescription = description
    m.top.ComponentController.CallFunc("show", {
        view: m.customView
    })
end sub

DetailsViewLogic.brs

else if selectedButton.id = "thumbnail"
    currentItem = details.currentItem
    if currentItem <> invalid then
        ShowCustomView(currentItem.hdPosterUrl, currentItem.description)
    end if
else

Also, it is better to extent custom component from SGDEX CustomView.