Integration with Django

This tutorial will help you integrate Flexmonster with the Django framework.

Prerequisites

This guide contains the following sections:

Run a simple Django and Flexmonster project from GitHub
Integrate Flexmonster into a Django application

Run a simple Django and Flexmonster sample from GitHub

Step 1. Download the .zip archive with the sample or clone it from GitHub with the following command:

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

Step 2. Run your application:

On Windows

py manage.py runserver

On macOS

python manage.py runserver

On Ubuntu/Linux

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.

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:

On Windows

py manage.py startapp dashboard

On macOS

python manage.py startapp dashboard

On Ubuntu/Linux

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. Create a folder (e.g., templates/) for HTML templates in the root folder where pivot_django/ and dashboard/ are located. Next, 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>
	let pivot = new Flexmonster({
		container: "pivotContainer",
		componentFolder: "https://cdn.flexmonster.com/",
		toolbar: true,
		report: {
			dataSource: {
				filename: "https://cdn.flexmonster.com/data/data.json"
			}
		}
	});
</script>

Step 5. 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 6. 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 7. Go to pivot_django/settings.py and add a path to the templates/ folder 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 8. Run your application:

On Windows

py manage.py runserver

On macOS

python manage.py runserver

On Ubuntu/Linux

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.

What’s next?

You may be interested in the following articles: