Bulk Actions with Confirmation Messages User Manual

Welcome to the User Manual for the Bulk Actions with Confirmation Messages feature. This feature empowers your web application with the ability to perform bulk actions, such as deleting multiple items, with built-in confirmation messages and customizable options. This manual will guide you through the integration and usage of this feature, ensuring enhanced user experience and security in your web application.

Using the Bulk Actions Feature

To utilize the Bulk Actions feature effectively, follow these steps:

Include Libraries:

Ensure that your web application includes the required libraries:

SweetAlert Library: This feature uses the SweetAlert library to display confirmation modals with custom messages and buttons.
Toastr Library: Toastr is used for displaying notifications after successful actions or errors.

Add Bulk Action Anchor Tags:

To use the Bulk Actions feature, add an anchor tag with the data-toggle=”bulk-action” attribute to your HTML. Customize the attributes for your specific use case. For instance, here’s an example of a “Delete Selected” button:

<a href="/delete-articles/"
   data-request-method="POST"
   data-toggle="bulk-action"
   data-confirm-message="Are you sure you want to delete the selected articles?"
   data-input-type="selected">Delete Selected</a>

HTML Attributes Summary

Here’s a summary of the HTML attributes used in the example:

Attribute	Is required	Options	Description
data-toggle=”bulk-action”	required	“bulk-action” (only: “bulk-action”)	Specifies the use of the “bulk-action” feature.
data-confirm-message	required	default: “Are you sure you would like to do this action!”	Customizable message that appears for confirmation message popup
href	required		URL for the action.
data-request-method	optional	selected, queryset, none (default: “selected”).	Determines the action target items: - selected: uses selected listing items ids as value - queryset: uses an object created of url querystring as value - none: the value is set to null
data-input-type	required	GET, POST, PUT, DELETE, etc (default: GET).	HTTP method for the request.
data-as-form	optional	default: “false”	Submits the request as form (requires a normal http response or redirect, not a json response)
data-force-reload	optional	default: “true”	Reloads the page after action confirmed. When set to “false,” it doesn’t reload the page and uses the provided “data-callback” to handle the response.
data-callback	required with data-force-reload=”false”	default: ‘’	Executes the provided function in its value.
data-confirm-icon	optional	warning, error, success, info, and question (default: ‘warning’)	Choose an icon for the confirmation modal.
data-confirm-yes	optional	default: ‘Yes, do it!’	Sets the popup confirmation dismiss button text.
data-confirm-no	optional	default: ‘No, cancel!’	Sets the popup confirmation dismiss button text.
data-cancel-message	optional	default: “Your action has been cancelled!.”	The message appears on dismissing the confirmation popup.
data-cancel-icon	optional	warning, error, success, info, and question (default: ‘error’)	Choose an icon for the cancellation notification.
data-cancel-action	optional	default: “Ok, got it!”	Sets the cancel notification button text.

Define Callback Function Define the callback function, such as handleDeletionCallback, which will be called after the action is completed. If data-force-reload is set to false, the response data is accessible via the this keyword:

<a href="/delete-articles/"
   data-request-method="POST"
   data-toggle="bulk-action"
   data-confirm-message="Are you sure you want to delete the selected articles?"
   data-force-reload="false"
   data-callback="handleDeletionCallback"
   data-input-type="selected">Delete Selected</a>

<script>
    function handleDeletionCallback() {
    console.log("Bulk deletion completed:", this);
    // Additional handling or notifications can be added here
    }
</script>

Usage with Custom Forms

Sometimes you may want to build a bulk action with actual forms while still leveraging the functionality provided by the package. To achieve this, the package provides two functions for you:

addBulkActionsInputsToForm Function

This function updates the form with the input type and value that you use in the request. Here’s how to use it:
```
var form = document.getElementById('delete-form');
BulkActions.addBulkActionsInputsToForm(form, "selected");
```
In this example, addBulkActionsInputsToForm is used to update the delete-form with the selected items’ IDs as input values.
resetBulkActionsInputs Function

This function resets the inputs in case of canceling an action. Here’s how to use it:
```
var form = document.getElementById('delete-form');
BulkActions.resetBulkActionsInputs(form);
```
In this example, resetBulkActionsInputs is used to reset the inputs in the delete-form after canceling an action.

These functions allow you to seamlessly integrate bulk actions with your custom forms, enhancing the usability and flexibility of the package.

Note

before you use this section you might need to make sure the BulkActions method is initialized so you can use this function

document.addEventListener('BulkActionsInitialized', function() {

  // your code here

})

Handling Backend Views

In your Django views, you can easily handle incoming data from HTTP requests, which may come in different formats. This section explains how to handle incoming data using the provided BulkActionMixin and a sample view.

Assuming you have a view, such as BlogDeleteView, that needs to handle bulk actions, you can use the BulkActionMixin to simplify the process. The mixin provides the get_actions_type_and_value method to parse the incoming data.

Let’s see how to integrate the BulkActionMixin into your view:

from dynamic_listing.views import BulkActionMixin
from django.views import View

class BlogDeleteView(BulkActionMixin, View):
    def post(self, request, *args, **kwargs):
       # Use the BulkActionMixin to get the action type and value
       input_type, value = self.get_actions_type_and_value(request.POST)

       # Now, you can use 'input_type' and 'value' as needed in your view logic

       # Example usage:
       if input_type == 'selected':
           # Handle selected items based on 'value'
           pass
       elif input_type == 'queryset':
           # Handle queryset items based on 'value'
           pass
       else:
           # Handle other cases where 'value' is None
           pass

       # Continue with your view logic based on the parsed data

In this example, the BlogDeleteView class uses the BulkActionMixin to easily retrieve the action type and value from the incoming POST data. This simplifies the process of handling different types of bulk actions.

You can then use input_type and value as needed in your view logic. For instance, you can handle selected items, queryset items, or other scenarios based on the parsed data.

By using the BulkActionMixin, you can streamline the handling of bulk actions in your Django views, making your code more organized and maintainable.

Troubleshooting

If you encounter issues or unexpected behavior while using the Bulk Actions with Confirmation Messages feature, consider the following troubleshooting tips:

Check Button Attributes:

Double-check that you’ve correctly added the required attributes to your action buttons. Ensure that the data-toggle attribute is set to “bulk-action” for bulk actions to function properly.
Library Dependencies:

Ensure you’ve included the SweetAlert and Toastr libraries in your project. Without these libraries, the confirmation modals and notifications won’t work as intended.
`csrfToken` Variable:

Remember to set the csrfToken variable before using the feature for authentication. This variable is crucial for CSRF protection when performing actions that modify data on the server.
Error Handling:

If you encounter errors during bulk actions or confirmations, check your browser’s console for detailed error messages. JavaScript errors or issues with library dependencies may be logged there.

By following these troubleshooting steps, you can identify and resolve common issues that may arise while using the Bulk Actions feature. If you continue to experience problems, consider reaching out to our support team for further assistance.

Conclusion

Congratulations! You’ve successfully integrated the “Bulk Actions with Confirmation Messages” feature into your web application. This powerful functionality enhances both the security and user experience when performing bulk actions within your application.

By following the usage instructions and customizing the provided HTML attributes, you can easily implement this feature to suit your specific use cases. Whether you need to delete multiple items, update records in bulk, or perform any other bulk action, this feature streamlines the process while ensuring user confirmation and notification.

Should you encounter any challenges or have questions regarding the integration or customization of this feature, please don’t hesitate to reach out to our dedicated support team. We’re here to assist you in making the most out of this valuable addition to your web application.

Thank you for choosing to enhance your web application with Bulk Actions and Confirmation Messages. We appreciate your trust in our solution, and we look forward to providing you with continued support and innovation in the future.

Happy coding!