Help us improve your experience.

Let us know what you think.

Do you have time for a two-minute survey?

 

New Tab Example

 

You can build on the Hello World sample app that the JSA SDK installs in your app workspace to add a tab to JSA.

You can build an app that uses a Jinja2 template to serve HTML content to a new tab as shown in the following image.

The files and folders that are described in the following table are required for the tab example:

Files/Folders

Description

app

The main directory for application files. The app folder contains the following files:

qpylib remains unchanged from the Hello World sample app example.

__init__.py remains unchanged from the Hello World sample app example.

views.py updated to include code to render the Jinja2 template. Here's snippets of the additional code that is added to views.py that is used to return the render_template:

from flask import render_template

def index(): return render_template("index.html", title = "QApp1 : Hello World !")

The Flask app route uses a Flask-Jinja2 templated HTML page to build the content for the Hello World tab.

/templates/index.html - The Jinja2 template to render when requests are routed to app.route annotated endpoints.

/static/css/style.css Renders the content that is served by the Jinja2 template, index.html.

__init__.py

This file creates an instance of the Flask micro-framework that is used to serve content to JSA. This file remains unchanged from the original Hello World example.

manifest.json

Describes to JSA that your app creates a new tab. Here's a snippet of the code, which is changed sightly from the Hello World sample app example.

"areas": [ { "id":"QHelloWorld", "text":"Hello World", "description":"A Hello World app", "url":"index", "required_capabilities":["ADMIN"]

The dev_opts is removed and is needed only for testing the app on a networked JSA Console.

Functionally, this manifest file is identical to the manifest.json that is provided in the basic Hello World sample app example.

run.py

Remains unchanged from the Hello World sample app example.

Manifest.json

{ "name":"QHelloWorld_1", "description":"Application to display QHelloWorld", "version":"1.0", "areas": [ { "id":"QHelloWorld_1", "text":"QHelloWorld_1", "description":"An Hello World app with some styling", "url":"index", "required_capabilities":["ADMIN"] } ] }

Functionally, this manifest file is identical to the manifest.json that is provided in the basic "Hello World" sample. The fields that describe the app are updated and the dev_opts block is removed because it is not needed.

Views.py

The views.py file contains the following code:

__author__ = 'IBM' from flask import render_template from app import app @app.route('/') @app.route('/index') def index(): return render_template("index.html", title = "QApp1 : Hello World !")

The views.py file imports the render_template method from Flask to render the index.html template.

Like the views.py file in the "Hello World" sample, the code creates default routes '/' and '/index', both of which return a simple string. The index route is declared in the url field of manifest.json.

Templates/index.html

This Jinja2 template contains the HTML content that is displayed on the new tab. It includes a variable that uses the value of the title parameter that is defined in views.py for the browser window title text.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>{{title}} - Main</title> <link rel="stylesheet" href="static/css/style.css"> </head> <body> <div id="pageheader" class="pagebanner"> JSA Application : Hello World !... </div> <div id="contentpane"> Hello! Welcome to the first JSA app served from the AppFramework </div> </body> </html>

Related Documentation