Sample template for a Graph Navigation View Card

araslabs_ViewCardStartingSample.json

{
    "container": {
        "type": "grid",
        "style": {
            "width": 200,
            "height": 90,
            "color": "#F7F7F7",
            "padding": {
                "left": 12,
                "right": 12,
                "top": 12,
                "bottom": 12
            },
            "rows": [
                {
                    "height": 20
                },
                {
                    "height": 16
                },
                {
                    "height": 16
                },
                {
                    "height": 16
                }
            ],
            "cols": [
                {
                    "width": 22
                },
                {
                    "width": 120
                },
                {
                    "width": 35
                }
            ],
            "border": {
                "width": 1,
                "color": "#555555",
                "cornerRadius": 2,
                "shadow": {
                    "horizontal": 2,
                    "vertical": 3,
                    "color": "#000000",
                    "opacity": 0.5
                }
            },
            "cells": [
                {
                    "content": "image",
                    "content_binding": "icon",
                    "col": 0,
                    "row": 0
                },
                {
                    "content": "text",
                    "content_binding": "keyed_name",
                    "col": 1,
                    "row": 0
                },
                {
                    "content": "text",
                    "content_binding": "generation",
                    "col": 2,
                    "row": 0,
                    "style": {
                        "verticalAlignment": "top",
                        "horizontalAlignment": "end",
                        "font": {
                            "size": 10,
                            "family": "Tahoma",
                            "weight": "normal",
                            "color": "#777777"
                        }
                    }
                },
                {
                    "content": "text",
                    "content_binding": "name",
                    "col": 1,
                    "row": 1,
                    "style": {
                        "font": {
                            "size": 12,
                            "family": "Tahoma",
                            "weight": "normal",
                            "color": "#333333"
                        }
                    }
                },
                {
                    "content": "text",
                    "content_binding": "classification",
                    "col": 1,
                    "row": 2,
                    "style": {
                        "font": {
                            "size": 10,
                            "family": "Tahoma",
                            "weight": "normal",
                            "color": "#333333"
                        }
                    }
                },
                {
                    "content": "text",
                    "content_binding": "state",
                    "col": 1,
                    "row": 3,
                    "style": {
                        "font": {
                            "size": 10,
                            "family": "Tahoma",
                            "weight": "normal",
                            "color": "#777777"
                        }
                    }
                }
            ]
        }
    },
    "style": {
        "arrowhead": {
            "height": 17,
            "width": 7
        }
    }
}