Custom Column Example

You can add columns that contain custom content to tables in JSA.

The following example describes how to add a column to the Offenses tab and to inject content into it. The content is in JSON LD format and is formatted by a custom JavaScript.

The following image shows an example of a custom column that is added to the Offenses tab.

Figure 1: Custom Column on the Offenses Tab.

The following manifest.json file example shows details of a custom_columns block.

Manifest.json

Use the custom_columns block in the app's manifest.json file to define the injection point, column header, and rest endpoint that are used to retrieve content in JSON format for the new column.

In this example, the JSON content that is injected is formatted by using a custom JavaScript. The location of the script, and the tab and page on which it is run are defined in a page_scripts block.

{ "name": "Custom column offenses list table", "description": "Render custom column offense using custom javascript", "uuid": "7191b673-3225-4d5d-97ba-a41d72cc65f0", "version": "1.0" "custom_columns": [ { "label": "Custom col custom javascript", "rest_endpoint": "custom_column_method", "page_id": "OffenseList" } ], "page_scripts": [ { "app_name": "SEM", "page_id": "OffenseList", "scripts": [ "static/qjslib/custom_offense.js" ] } ] }

The following list describes the contents in the code snippet from the custom_columns block.

1. The label field contains the column header content.

2. The custom_column_method REST endpoint is defined in the app/views.py script. This custom_column_method REST endpoint is used to retrieve the information that is injected into the custom column.

3. The page_id field defines the page in which the new table column is added. In this case, it is the All Offenses page.

App/views.py

__author__ = 'IBM' from flask import Response from app import app from qpylib.qpylib import log from qpylib.offense_qpylib import get_offense_json_ld import json @app.route('/custom_column_method/<offense_id>', methods=['GET']) def get_offense(offense_id): try: log("get offense") offense_json = get_offense_json_ld(offense_id) return Response(response=offense_json, status=200, mimetype='application/json') except Exception as e: log('Error ' + str(e)) raise

The following list describes the contents in the code snippet from the views.py script.

1. The get_offense_json_ld function that is imported from the app/qpylib/offense_qpylib.py library retrieves the details for the offense ID in JSON LD format.

2. The get_offense function includes an @app.route annotation that defines the endpoint's route. The @app.route includes the manifest's rest_endpoint field value /custom_column_method, and the context information. In this case, the context information is the offense ID.

Static/qjslib/custom_offense.js

The static/qjslib/custom_offense.js script renders the JSON content for the Offense ID and its source IP address.

function renderJsonContent(jsonTagId, targetDivTagId) { var jsonTagContent = $("#" + jsonTagId).html(); var json = JSON.parse(jsonTagContent); $("#" + targetDivTagId).html(renderOffense(json)); } function renderOffense(json) { return 'id is' + json.data.id + ',' + 'Source IP is' + json.data.offense_source; }