Integration with Django

In this tutorial, you can learn how to integrate Flexmonster with the Django framework.

Note The tutorial describes how to integrate Flexmonster using the Django templates. If you are using Django only for the back end, see how to integrate Flexmonster with JavaScript or with front-end frameworks.

Prerequisites

• Python 3
• Django

Note Python 3 and Django versions must be compatible. Check out the version compatibility guide.

Run a simple Django and Flexmonster sample from GitHub

Step 1. To get our sample project, download it as ZIP or clone it with the following command:

git clone https://github.com/flexmonster/pivot-django && cd pivot-django

Step 2. Run the following command:

py manage.py migrate

python3 manage.py migrate

This will create database tables for the default Django apps used in the project. Learn more about the migrate command.

Step 3. Run your application:

py manage.py runserver

python3 manage.py runserver

To see the result, open http://localhost:8000/ in your browser.

The application can be shut down manually with Ctrl + C (Control + C on macOS).

Integrate Flexmonster into a Django application

To integrate Flexmonster into a Django app, follow the steps below:

Step 1. If you don’t have a Django project yet, create it by running the following commands in the console:

django-admin startproject pivot_django
cd pivot_django

Step 2. In the project, create a new app with the following command:

py manage.py startapp dashboard

python3 manage.py startapp dashboard

Step 3. Open the pivot_django/settings.py file and add the app’s configuration class to the INSTALLED_APPS setting. The app’s configuration class can be found in dashboard/apps.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'dashboard.apps.DashboardConfig',
]

Step 4. Run the following command:

py manage.py migrate

python3 manage.py migrate

This will create database tables for the applications listed in the INSTALLED_APPS setting. Learn more about the migrate command.

Step 5. Create a folder (e.g., templates/) for HTML templates in the root folder where pivot_django/ and dashboard/ are located.

Step 6. Go to pivot_django/settings.py again and add a path to the folder for HTML templates (e.g., templates/) to the DIRS list in TEMPLATES:

• If the pathlib library is used to manipulate paths:

  'DIRS': [BASE_DIR.joinpath('templates')],

• If the os.path module is used to manipulate paths:

  'DIRS': [os.path.join(BASE_DIR, 'templates')],

Step 7. In the folder for HTML templates (e.g., templates/), create an HTML file (e.g., index.html) and add Flexmonster to it:

<h1>Flexmonster integration with Django</h1>
<div id="pivotContainer"></div>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<script>
	const pivot = new Flexmonster({
		container: "pivotContainer",
		componentFolder: "https://cdn.flexmonster.com/",
		toolbar: true,
		report: {
			dataSource: {
				filename: "https://cdn.flexmonster.com/data/data.json"
			}
		}
	});
</script>

Step 8. Add the created HTML page to the app’s views. Navigate to dashboard/views.py and insert the following index function there:

def index(request):
    return render(request, 'index.html')

Step 9. Open pivot_django/urls.py and add the path('', views.index, name='index'), line to the urlpatterns:

from django.contrib import admin
from django.urls import path
from dashboard import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name='index'),
]

Step 10. Run your application:

py manage.py runserver

python3 manage.py runserver

To see the result, open http://localhost:8000/ in your browser.

The application can be shut down manually with Ctrl + C (Control + C on macOS).

What’s next?

You may be interested in the following articles:

• How to customize the Toolbar
• How to add localization
• How to apply a CSS theme
• How to set specific options common for all reports