Templates

Views templates

Viewflow uses a structured approach for template lookup, allowing developers to customize the presentation layer of different workflow views. This approach supports a hierarchy of template customizations, ranging from global overrides to task-specific adjustments. Below, we detail how to customize templates for three primary types of views: Detail View, Start Process View, and Update Process View.

Template Lookup Order

When rendering a view, Viewflow searches for templates in the following order:

• {opts.app_label}/{opts.app_label}/{flow_task.name}_{self.template_filename}
• {opts.app_label}/{opts.flow_label}/{self.template_filename}
• viewflow/workflow/{self.template_filename}

The placeholders used are:

• {opts.app_label}: The application label.
• {opts.flow_label}: The label of the flow within the application.
• {flow_task.name}: The name of the specific task within the flow.
• {self.template_filename}: The base name of the template file targeted for the view.

Customizing Specific Views

Detail View (task_detail.html)

The Detail View presents detailed information about a specific task within a flow. To customize this view:

• Task-Specific Customization: Create a template named {app_label}/{app_label}/{task_name}_task_detail.html. For example, to customize the detail view for an approve task in a HelloWorld flow, create: hello_world/hello_world/approve_task_detail.html
• Flow-Specific Customization: To customize detail views for all tasks within a specific flow, name your template {app_label}/{app_label}/task_detail.html. For example: hello_world/hello_world/task_detail.html
• Global Customization: For project-wide customizations across all flows, create viewflow/workflow/task_detail.html.

Create Process View (start.html)

The Create Process View is used to initiate a new process. To customize this view, use start.html as self.template_filename. Following the lookup order, you can customize:

• Flow-Specific Start View: Place your customized start.html in either the flow’s specific directory ({app_label}/{app_label}/start.html) or under the global viewflow/workflow/ directory for a more general override
• Task-Specific Customization: For task-specific overrides, create a template named {app_label}/{app_label}/{task_name}_task.html.
• Flow or Global Customization: Similar to the Detail View, place your task.html in the appropriate directory based on the desired level of specificity.

Update Process View (task.html)

The Update Process View is employed when updating an ongoing process. The customization approach is similar, utilizing task.html as self.template_filename:

• Task-Specific Customization: For task-specific overrides, create a template named {app_label}/{app_label}/{task_name}_task.html.
• Flow or Global Customization: Similar to the Detail View, place your task.html in the appropriate directory based on the desired level of specificity.

Process data

The process_data.html template is a shared resource within Viewflow, utilized by multiple views to present process-related data. Customizing this template allows for a unified appearance and behavior across different parts of your workflow application. Below are the steps to override the process_data.html template at both the flow-specific and global levels.

Viewflow searches for the process_data.html template using the following order:

• {app_label}/{flow_label}/process_data.html
• viewflow/workflow/process_data.html