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