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

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. Download a .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 the following command:

On Windows

py manage.py migrate

On macOS or Ubuntu/Linux

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:

On Windows

py manage.py runserver

On macOS or 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 or 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 database tables for the applications listed in the INSTALLED_APPS setting with the following command:

On Windows

py manage.py migrate

On macOS or Ubuntu/Linux

python3 manage.py migrate

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 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>
	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 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:

On Windows

py manage.py runserver

On macOS or 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: