Interface Adjustments
The great thing about the described approach is that you can easily apply it to your existing application.
You can start with an existing page or create a new one and use either real or dummy data for it.
If you are working with an existing example you need to make a couple of adjustments to your application interface:
- Add the block of UI elements required to send an email – the Email button with the optional To and Subject fields.
- As you want to be able to email the current view as an attached document you would probably like to remove the form fields used for the search and email from the output (there is no point in having this content in the document). You need to enclose this block along with the Report search form fields in a separate block element (a div tag) with a set id attribute (so we can refer to it through the DOM).
If you are starting from scratch (whether you are working with a real or dummy data) you have to account for this as well.
As a result your typical view would include the following:
1. The form fields for searching and filtering.
2. The forms fields for emailing (which I named To and Subject)
These can be either text fields – to let the user enter the parameters, or hidden fields if you want the parameters hard-coded.
3. The button that will trigger the Email function.
4. The content – the HTML table or datagrid (or any other type of data).
Alex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms.