#Layout Model Angularjs Directive
This repository contains of two parts:
- AngularJS directive for rendering JSON XBRL layoutmodels ( in /app/directive )
- an example app to showcase the directive (in /app )
The master branch of this repository is automatically deployed to http://rendering.secxbrl.info/
- Nodejs (version 4.2.2 or superior)
- Git
- Grunt & bower (via npm):
npm install grunt-cli bower -g
git clone https://github.com/28msec/layoutmodel-renderer-angular.git
cd layoutmodel-renderer-angular
npm install
bower install
To run the sample app:
grunt server
"layoutmodel-renderer-angular": "https://github.com/28msec/layoutmodel-renderer-angular.git"
to your bower.json file.
Make sure the required scripts are imported in your index.html:
<script src="/bower_components/layoutmodel-renderer-angular/app/directive/layoutmodel.js"></script>
<script src="/bower_components/layoutmodel-renderer-angular/app/directive/layoutmodeltemplate.js"></script>
Import the LESS file into your own LESS file:
@import "/bower_components/layoutmodel-renderer-angular/app/directive/layoutmodel.less";
Include the following files in your index.html:
<script src="https://raw.githubusercontent.com/28msec/layoutmodel-renderer-angular/master/app/directive/layoutmodeltemplate.js"></script>
<script src="https://raw.githubusercontent.com/28msec/layoutmodel-renderer-angular/master/app/directive/layoutmodel.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/28msec/layoutmodel-renderer-angular/master/app/styles/main.css">
Alternatively you can download these files locally:
<script src="/layoutmodel-renderer-angular/layoutmodeltemplate.js"></script>
<script src="/layoutmodel-renderer-angular/layoutmodel.js"></script>
<link rel="stylesheet" href="/layoutmodel-renderer-angular/main.css">
Using the directive in a HTML page looks like that:
<div class="preview-style">
<layoutmodel model="mymodel"
labelidx="labelidx"
constraints="constraints"
truncate="truncate"
checks="checks"
headerclick="onheaderclick(header)"
dataclick="ondataclick(data)">
</layoutmodel>
</div>
The LESS file for the directive predefines 3 styles that can be used to style the report. To use one of them wrap the directive into a DIV element with one of these CSS classes:
- preview-style : Most refined style
- document-style : A style for printing
- plain-style : Simple style for testing
You can override the colors by redefining some or all of the LESS variables defined in app/directive/layoutmodel.less
The directive itself has multiple parameters:
- model : The scope variable containing the JSON model to be layouted.
- labelidx : The index of the labels to be used.
- constraints : Boolean variable. if 'true' slicers are shown, if 'false' slicers are hidden.
- truncate : Boolean variable. If 'true' text blocks are shortenend.
- checks : Boolean variable. If 'true' validation checks are shown.
- headerclick : Expression to be executed when the user clicks into a column or row header cell. The variable 'header' contains the header JSON from the layoutmodel
- dataclick : Expression to be executed when the user clicks into a data cell. The variable 'data' contains the JSON of the cell. (object, array or null depending on number of facts in cell)
- data : Overrides template for data cells. (Example value: data="'myDataTemplate.html'" if there is a ng-template with name 'myDataTemplate.html')
- header : Overrides template for header cells
- title : Overrides template for top-left cell
The original templates for 'data', 'header' and 'title' are as follows:
The topleft title cell:
<script type="text/ng-template" id="defaultTitle.html">
<div>{{ innerTitle.CellLabels[labelidx] || innerTitle.CellLabels[0] }}</div>
</script>
A default header cell:
<script type="text/ng-template" id="defaultHeader.html">
{{ header.CellLabels[labelidx] || header.CellLabels[0] }}
</script>
A default data cell:
<script type="text/ng-template" id="defaultData.html">
<div class="value">
<span ng-bind-html="showValue(data)"></span><span ng-if="showMoreLink(data)" class="morelink"><a ng-click="showDetails($event, data)">[more]</a></span>
<span ng-if="checks" class="validation"><i ng-show="data.Valid == false" class="fa fa-times invalid"></i><i ng-show="data.Valid" class="fa fa-check valid"></i></span>
</div>
</script>