block by timelyportfolio 5fdffcc9b90b007c41e7

quick example of xml_tree_view in xmlview htlmwidget

Full Screen

Built with blockbuilder.org

Julian Gruber made a nice simple collapsible XML viewer xml-viewer. I thought it would fit nicely in @hrbrmstr’s new htmlwidget xmlview. Here is how it looks in its first iteration.

# need newest htmlwidgets
#devtools::install_github("ramnathv/htmlwidgets")
#devtools::install_github("hrbrmstr/xmlview")

library(xmlview)

# from ?xml2::read_xml
cd <- xml2::read_xml("http://www.xmlfiles.com/examples/cd_catalog.xml")

xml_tree_view(cd)

htmltools::browsable(
  htmltools::tagList(
    xml_tree_view(cd, width = "100%", height = "300px"),
    xml_view(cd)
  )
)

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="./htmlwidgets.js"></script>
<script src="./xml-viewer.js"></script>
<script src="./xmltreeview.js"></script>

</head>
<body style="background-color:white;">
<div id="htmlwidget_container">
  <div id="htmlwidget-6434" style="width:960px;height:500px;" class="xmltreeview"></div>
</div>
<script type="application/json" data-for="htmlwidget-6434">{"x":{"xmlDoc":"<?xml version=\"1.0\" encoding=\"ISO8859-1\"?>\n<CATALOG>\n  <CD>\n    <TITLE>Empire Burlesque\u003c/TITLE>\n    <ARTIST>Bob Dylan\u003c/ARTIST>\n    <COUNTRY>USA\u003c/COUNTRY>\n    <COMPANY>Columbia\u003c/COMPANY>\n    <PRICE>10.90\u003c/PRICE>\n    <YEAR>1985\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Hide your heart\u003c/TITLE>\n    <ARTIST>Bonnie Tylor\u003c/ARTIST>\n    <COUNTRY>UK\u003c/COUNTRY>\n    <COMPANY>CBS Records\u003c/COMPANY>\n    <PRICE>9.90\u003c/PRICE>\n    <YEAR>1988\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Greatest Hits\u003c/TITLE>\n    <ARTIST>Dolly Parton\u003c/ARTIST>\n    <COUNTRY>USA\u003c/COUNTRY>\n    <COMPANY>RCA\u003c/COMPANY>\n    <PRICE>9.90\u003c/PRICE>\n    <YEAR>1982\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Still got the blues\u003c/TITLE>\n    <ARTIST>Gary More\u003c/ARTIST>\n    <COUNTRY>UK\u003c/COUNTRY>\n    <COMPANY>Virgin redords\u003c/COMPANY>\n    <PRICE>10.20\u003c/PRICE>\n    <YEAR>1990\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Eros\u003c/TITLE>\n    <ARTIST>Eros Ramazzotti\u003c/ARTIST>\n    <COUNTRY>EU\u003c/COUNTRY>\n    <COMPANY>BMG\u003c/COMPANY>\n    <PRICE>9.90\u003c/PRICE>\n    <YEAR>1997\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>One night only\u003c/TITLE>\n    <ARTIST>Bee Gees\u003c/ARTIST>\n    <COUNTRY>UK\u003c/COUNTRY>\n    <COMPANY>Polydor\u003c/COMPANY>\n    <PRICE>10.90\u003c/PRICE>\n    <YEAR>1998\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Sylvias Mother\u003c/TITLE>\n    <ARTIST>Dr.Hook\u003c/ARTIST>\n    <COUNTRY>UK\u003c/COUNTRY>\n    <COMPANY>CBS\u003c/COMPANY>\n    <PRICE>8.10\u003c/PRICE>\n    <YEAR>1973\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Maggie May\u003c/TITLE>\n    <ARTIST>Rod Stewart\u003c/ARTIST>\n    <COUNTRY>UK\u003c/COUNTRY>\n    <COMPANY>Pickwick\u003c/COMPANY>\n    <PRICE>8.50\u003c/PRICE>\n    <YEAR>1990\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Romanza\u003c/TITLE>\n    <ARTIST>Andrea Bocelli\u003c/ARTIST>\n    <COUNTRY>EU\u003c/COUNTRY>\n    <COMPANY>Polydor\u003c/COMPANY>\n    <PRICE>10.80\u003c/PRICE>\n    <YEAR>1996\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>When a man loves a woman\u003c/TITLE>\n    <ARTIST>Percy Sledge\u003c/ARTIST>\n    <COUNTRY>USA\u003c/COUNTRY>\n    <COMPANY>Atlantic\u003c/COMPANY>\n    <PRICE>8.70\u003c/PRICE>\n    <YEAR>1987\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Black angel\u003c/TITLE>\n    <ARTIST>Savage Rose\u003c/ARTIST>\n    <COUNTRY>EU\u003c/COUNTRY>\n    <COMPANY>Mega\u003c/COMPANY>\n    <PRICE>10.90\u003c/PRICE>\n    <YEAR>1995\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>1999 Grammy Nominees\u003c/TITLE>\n    <ARTIST>Many\u003c/ARTIST>\n    <COUNTRY>USA\u003c/COUNTRY>\n    <COMPANY>Grammy\u003c/COMPANY>\n    <PRICE>10.20\u003c/PRICE>\n    <YEAR>1999\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>For the good times\u003c/TITLE>\n    <ARTIST>Kenny Rogers\u003c/ARTIST>\n    <COUNTRY>UK\u003c/COUNTRY>\n    <COMPANY>Mucik Master\u003c/COMPANY>\n    <PRICE>8.70\u003c/PRICE>\n    <YEAR>1995\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Big Willie style\u003c/TITLE>\n    <ARTIST>Will Smith\u003c/ARTIST>\n    <COUNTRY>USA\u003c/COUNTRY>\n    <COMPANY>Columbia\u003c/COMPANY>\n    <PRICE>9.90\u003c/PRICE>\n    <YEAR>1997\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Tupelo Honey\u003c/TITLE>\n    <ARTIST>Van Morrison\u003c/ARTIST>\n    <COUNTRY>UK\u003c/COUNTRY>\n    <COMPANY>Polydor\u003c/COMPANY>\n    <PRICE>8.20\u003c/PRICE>\n    <YEAR>1971\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Soulsville\u003c/TITLE>\n    <ARTIST>Jorn Hoel\u003c/ARTIST>\n    <COUNTRY>Norway\u003c/COUNTRY>\n    <COMPANY>WEA\u003c/COMPANY>\n    <PRICE>7.90\u003c/PRICE>\n    <YEAR>1996\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>The very best of\u003c/TITLE>\n    <ARTIST>Cat Stevens\u003c/ARTIST>\n    <COUNTRY>UK\u003c/COUNTRY>\n    <COMPANY>Island\u003c/COMPANY>\n    <PRICE>8.90\u003c/PRICE>\n    <YEAR>1990\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Stop\u003c/TITLE>\n    <ARTIST>Sam Brown\u003c/ARTIST>\n    <COUNTRY>UK\u003c/COUNTRY>\n    <COMPANY>A and M\u003c/COMPANY>\n    <PRICE>8.90\u003c/PRICE>\n    <YEAR>1988\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Bridge of Spies\u003c/TITLE>\n    <ARTIST>T`Pau\u003c/ARTIST>\n    <COUNTRY>UK\u003c/COUNTRY>\n    <COMPANY>Siren\u003c/COMPANY>\n    <PRICE>7.90\u003c/PRICE>\n    <YEAR>1987\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Private Dancer\u003c/TITLE>\n    <ARTIST>Tina Turner\u003c/ARTIST>\n    <COUNTRY>UK\u003c/COUNTRY>\n    <COMPANY>Capitol\u003c/COMPANY>\n    <PRICE>8.90\u003c/PRICE>\n    <YEAR>1983\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Midt om natten\u003c/TITLE>\n    <ARTIST>Kim Larsen\u003c/ARTIST>\n    <COUNTRY>EU\u003c/COUNTRY>\n    <COMPANY>Medley\u003c/COMPANY>\n    <PRICE>7.80\u003c/PRICE>\n    <YEAR>1983\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Pavarotti Gala Concert\u003c/TITLE>\n    <ARTIST>Luciano Pavarotti\u003c/ARTIST>\n    <COUNTRY>UK\u003c/COUNTRY>\n    <COMPANY>DECCA\u003c/COMPANY>\n    <PRICE>9.90\u003c/PRICE>\n    <YEAR>1991\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>The dock of the bay\u003c/TITLE>\n    <ARTIST>Otis Redding\u003c/ARTIST>\n    <COUNTRY>USA\u003c/COUNTRY>\n    <COMPANY>Atlantic\u003c/COMPANY>\n    <PRICE>7.90\u003c/PRICE>\n    <YEAR>1987\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Picture book\u003c/TITLE>\n    <ARTIST>Simply Red\u003c/ARTIST>\n    <COUNTRY>EU\u003c/COUNTRY>\n    <COMPANY>Elektra\u003c/COMPANY>\n    <PRICE>7.20\u003c/PRICE>\n    <YEAR>1985\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Red\u003c/TITLE>\n    <ARTIST>The Communards\u003c/ARTIST>\n    <COUNTRY>UK\u003c/COUNTRY>\n    <COMPANY>London\u003c/COMPANY>\n    <PRICE>7.80\u003c/PRICE>\n    <YEAR>1987\u003c/YEAR>\n  \u003c/CD>\n  <CD>\n    <TITLE>Unchain my heart\u003c/TITLE>\n    <ARTIST>Joe Cocker\u003c/ARTIST>\n    <COUNTRY>USA\u003c/COUNTRY>\n    <COMPANY>EMI\u003c/COMPANY>\n    <PRICE>8.20\u003c/PRICE>\n    <YEAR>1987\u003c/YEAR>\n  \u003c/CD>\n\u003c/CATALOG>\n"},"evals":[],"jsHooks":[]}</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-6434">{"viewer":{"width":450,"height":350,"padding":15,"fill":true},"browser":{"width":960,"height":500,"padding":40,"fill":false}}</script>
</body>
</html>

xmltreeview.js

HTMLWidgets.widget({

  name: 'xmltreeview',

  type: 'output',

  factory: function(el, width, height) {

    return {
      view: {},

      renderValue: function(x) {

        //empty el in case of dynamic/Shiny
        el.innerHTML = "";

        //add CSS overflow scroll to el
        el.style.overflow = "scroll";

        var view = new Viewer(x.xmlDoc);
        view.appendTo(el);

        this.view = view;

      },

      resize: function(width, height) {

      }
    };

  }
});