FORGOT YOUR DETAILS?

QUESTIONS? CALL: 0030 211 999 4800

Candi JSON to HTML

SharePoint Web-Part

JSON to HTML WebPart

JSON to HTML is a custom add-in part for modern sharepoint and sharepoint online. Its a very helpful add in, which gives you the ability to translate your json data into html.

JSON to HTML add-in, receives two properties: Url and Template.
URL: It’s a URL that returns a json object.
Template: The template that describes, the html structure we want to display. You can add in-line styling in your elements.

How to configure

STEP 1: Insert URL

Tap the edit button:

Insert your url in the "URL" input:

Insert the template in the "template" input. See "Examples" for how to construct your template.

Example 1:

Assume that your URL returns the following JSON:

      {
        "login":"John@example.gr",
        "id":1,
        "department":"HR"
      }

And you provide the following, in the template property:

<p>My login name is:{{login}}. I work on {{department}}department</p>

You will get the following result into your page:

My login name is:John@example.gr.I work on HR department.

Symbol Explanations:

“{{login}}”: access the “login” property and displays its value.

Example 2:

In this case we have an array with json objects. Assume that your URL returns the following array:

      [
        {
        "login": "John@example.gr",
        "id": 1,
        "department": "HR"
        },
          {
        "login": "George@example.gr",
        "id": 2,
        "department": "sales"
          },
        {
        "login": "Andreas@example.gr",
        "id": 3,
        "department": "IT"
        }
      ]

And you provide the following template:

<table>
<tr><th>login name</th><th>department</td ></tr>
{{@.}}
<tr><td>{{login}} </td> <td>{{department}} </td></tr>
{{/.}}
</table>

You will get the following result into your page:

login name department
Andreas@example.gr IT

Symbol Explanations:

“{{@.}}”: You place that where you want to start iterating your json objects in your array.

“{{/.}}”: You place that in order to stop iterating.

Example 3:

Assume that your URL returns the following array:

      [
        {
          "login": "John@example.gr",
          "department": "HR",
          "person": {
            "name": "John",
            "age": "34"
           }
        },
        {
          "login": "George@example.gr",
          "department": "sales",
          "person": {
            "name": "George",
            "age": "55"
           }
        }
      ]

And you provide the following template:

{{@.}}
<p>login name: {{login}}</p>
{{@person}}
<p>name: {{name}}</p>
{{/person}}
{{/.}}

You will get the following result into your page:

login name: John@example.gr
name: John
login name: George@example.gr
name: George

Symbol Explanations:

In this example we use “{{@person}}” in order to access the “person” object, so we can access its properties (e.g name, age). When we finish we close it with “{{/person}}”.

Example 4:

Assume that your URL returns the following array:

        [
            {
                "name":"Argentina",
                "alpha2Code":"AR",
                "capital":"Buenos Aires"
            },
            {   
                "name":"Armenia",
                "alpha2Code":"AM",
                "capital":"Yerevan",
            },
            {
                "name":"Australia",
                "alpha2Code":"AU",
                "capital":"Canberra"
            }
        ]

And you provide the following template:

<table>
<tr><th>Country name </th><th>Capital</td ></tr>
{{@.}}
<tr><td style="color:red">{{name}} </td> <td>{{capital}} </td></tr>
{{/.}}
</table>

You will get the following result into your page:

Country name Capital
Argentina Buenos Aires
Armenia Yerevan
Australia Canberra

Example Explanations:

In this example we use inline styling "style="color:red"

Request a demo for JSON to HTML WebPart

TOP