Battler45 / SierraMigrationToGitHub

Migration from unfuddle to GitHub
0 stars 0 forks source link

Client Notification System #215

Closed Battler45 closed 4 years ago

Battler45 commented 4 years ago

Vihang,

One thing we've been talking about doing is implementing a notification system that would enable us to let users know when we've launched a new feature or made a change to the admin area. One method would be mass email, but we thought it might make more sense to build a system into the admin area, so that users could view and review the messages at the same time that they are actively using the system.

Reviewing our options, we think the best approach would be to implement something similar to what Twitter has done, which you can see in the attached screenshot.

As you can see, there is a blue band that spans the top of the page and pushes the rest of the page down. It contains a short notification and then a close button. The close button sets a flag in the database, I believe, so that the system knows not to display that notification to that user from that point on.

Creating a system like this would probably require a couple of new tables. The main Notifications table would contain:

  • Notification headline

  • Notification Body (In cases where we needed to display more than just a headline, the headline notification would contain a Read More link which would launch this Notification Body in an overlay)

  • Notification Description (more on this later)

  • Site Types to which this is to be shown (IDX, Standard Site, Pro Site, etc.) -- these would need to be selected via checkboxes, as we would need to be able to select more than one

  • Security Levels to which this is to be shown (Agent, Manager, Primary Manager) -- again, these would need to be selected via checkboxes, as we would need to be able to select more than one

  • MLS Regions to which this is to be shown -- again, need to be able to select multiple

  • Date Posted

  • Posted By

And then there would need to be a table to capture which users had closed which notifications.

The notifications would only be shown on the home page / Dashboard. In cases where there were more than one notification pertaining to the active user, they would all be shown in alternating color stripes. They should probably also auto-expire after 15 or 30 days -- meaning, if the user has not Closed them in that amount of time, they would automatically disappear for all users.

Then, of course, we would also need a couple of new pages to manage the notifications -- one a summary page to display all notifications we've created, and then a second page to allow us to add or edit a notification. These should be straightforward and I will work on mockups of these.

Please let me know if you have any questions.

Thanks

Posted by Peskoe Ben(unfuddle username: bpeskoe)

Battler45 commented 4 years ago

Ben,

I've implemented notification-form page and updated dashboard page to show notifications.

Please note that on the notification-form page,

1-- The text editor will have default stylesheet.

2-- The uploaded images/files will be stored under UserFiles/Notification folder.

On the dashboard page, the page contents are note pushed down when then notification bar is shown, rather it is displayed on top of the header section. I believe this is due the absolute positioning of some of the elements on the page. Please see the attached image.

Please let me know if you have any suggestions to fix this positioning issue. Also, please let me know how to style the notification bar.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

Battler45 commented 4 years ago

Vihang,

Thanks -- I'm not able to find this functionality on the development server for viewing or testing? If you can post it there (or tell me how to find it), I may be able to work with the site CSS to make the necessary modifications to get it working properly. My guess is that, in cases where notifications need to be added, we may need to use the jQuery onReady function to modify the css positioning of the affected divs.

Posted by Peskoe Ben(unfuddle username: bpeskoe)

Battler45 commented 4 years ago

Ben,

Sorry for the confusion but I haven't yet published the changes. I was planning to do so based on your feedback. I'll look into setting positions using jQuery. I'll update you more on this tomorrow.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

Battler45 commented 4 years ago

Vihang,

Yes, I think there are only 2 or 3 classes that will need to be adjusted in cases where there are notifications, and you should be able to calculate the needed height simply by multiplying against the number of notifications to be displayed. The only suggestion I have would be to set the notifications container to display: none initially, and then only display it (maybe via show("slow")) once the position adjustments have been made -- that will prevent the notifications from ever overlapping the navigation. You might also make the background color of the notifications container the same as the background color of the site header to make it as seamless as possible.

The last piece we will need will be a "Manage Notifications" page, which will just be a simple list of all of our current active notifications -- I'll work on that for you today.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

Battler45 commented 4 years ago

Ben,

The requirements are pretty much clear. I'll start working on creating required tables and stored procedures.

A question regarding auto-expiration of notification: the notification record and corresponding records in UserNotifications table would be deleted upon expiration.

Thanks

Posted by Shah Vihang(unfuddle username: vihang)

Battler45 commented 4 years ago

Vihang,

Yes, I had a similar thought about the "Total" column. For our purposes, it does not need to be 100% exact. Perhaps we could simply calculate the total number of applicable users at the time the notification is created and store that as a static value in the database? That way, we would not need to worry about recalculating as new users are added or existing users are removed. Since only administrators will be viewing this info, it only needs to give us a rough idea of how many people are viewing & closing the notification. So, I don't believe we need to go to the trouble of storing all the notifications in the CAA_AdminUserNotifications table.

Please let me know if you think that will work.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

Battler45 commented 4 years ago

Vihang,

This looks good, but

1 - I think the "Body" field in the first table may be unnecessary. My thought for this was that the headline would be what is displayed to the user in the horizontal bar across the top of the page, and then the Description field would be displayed in the overlay when they click to view the details of the headline. We will use a tinyMCE editor window to enter the description, and so can include a headline there if we want. I don't believe that we would need another text field, but please correct me if I am missing something. Also, you may just want to use "Descrip" or "Message" for the name of that field, as I believe "Description" may be a reserved word (not that it can't still be used with brackets, but in general I try to avoid it).

2 - In the second table, could we add a couple of additional columns, "DateViewed" and "DateClosed" -- that will allow us (eventually) to analyze the average length of time between when an announcement is posted, when it is viewed, and when it is closed, so that we can track changes to the system and know whether these are improving or not.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

Battler45 commented 4 years ago

Vihang,

I've posted a mockup of the Notifications management page here:

http://client.sierrainteractivedev.com/notifications.htm

It should be fairly straightforward, but a few notes about the mockup:

1 - I've used ellipses ("...") in a number of places. What I'd like is for you to use Vihar's CSS trick that will automatically append an ellipsis when (and only when) the text reaches the width of the available container. So, the Headline should extend to the full width of the table cell but, if it exceeds that width, it should be truncated with a "..." rather than wrapping to a new line. The same would also be true for Site Types, Distribution Types, and MLS Regions.

If you could display the full value in a tooltip, that would be great.

2 - I'm not sure if it will be possible to do what I have in mind for the "Total / Closed" column, but the "Total" number would represent the total number of users to whom the notification is (or has been) displayed, and the "Closed" number would represent the total number of those users who had closed the notification before it expired.

3 - Can you also make the column headings sortable? (The "Total / Closed" column would not need to be sortable, though.)

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

Battler45 commented 4 years ago

Ben,

I've published the notification system changes on the development site. You can access the Manage Notifications page via "Manage Notifications" link under Accounts menu.

Please check the functionality and let me know your feedback.

Thanks

Posted by Shah Vihang(unfuddle username: vihang)

Battler45 commented 4 years ago

Ben,

I've removed Body column from the CAA_Notifications table and renamed Description to Descrip.

I've added a new column ActionDate in the CAA_AdminUserNotifications table rather than having separate columns for DateViewed and DateClosed, since there will be only one entry for user action on notification.

I've created necessary stored procedures and dataaccess methods. I'll now work on displaying notifications on the dashboard page. Please provide me mockups of the notification pages in a day or two.

Thanks

Posted by Shah Vihang(unfuddle username: vihang)

Battler45 commented 4 years ago

Ben,

I've fixed the notification-bar positioning issue. Thanks for your suggestions.

I am now working on Manage Notifications page and will publish these changes tomorrow for your review.

Re. "Total / Closed" column:

Getting Closed count will be straightforward, however to get Total count, we will need to store all the notifications displayed to the user in CAA_AdminUserNotifications table. Upon user action (close/read more) the action columns value will be updated and such notifications will not be displayed next time. I'll also add an additional column LastDisplayedOn (datetime) - that will tell us when the notification was last displayed to the user.

Please let me know your thoughts on this.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

Battler45 commented 4 years ago

Ben,

I've updated notification system per your feedback and published the changes to the live site.

Please note that, having removed the ability to close the notification from the overlay, we will not be able to track whether the user has viewed the notification message or not. Please let me know if I should add an additional column "DateViewed" in the CAA_AdminUserNotifications table (as suggested by you), which will be updated when user clicks on the "Read More" link.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

Battler45 commented 4 years ago

Ben,

I've made changes for comment-15. I could not get your point about alternating notification background-color using the orange color above.

Also please note that,

1-- I could not make the notification overlay buttons equal width. In IE the "Keep this notification..." button width was not set to the fixed width as a result these buttons were appearing left aligned.

2-- I forgot to mention this yesterday but there is an issue in sorting notifications on Site Types, Distribution and MLS Regions columns. In the database we are storing comma separated Ids for these columns and all the processing to display corresponding text values is done in the code, since we don't have SiteType and DistributionType text value available in the database. So, the notifications will be sorted on the Id values rather than the text values. Please let me know if I should update the code to fetch all the notifications and perform sorting and paging in the code.

3-- I've also updated code to upload notification files/images under the UserFiles/Notification folder.

Please verify the changes and let me know your feedback.

Thanks

Posted by Shah Vihang(unfuddle username: vihang)

Battler45 commented 4 years ago

Vihang,

Somehow I missed this feedback yesterday, I apologize. Regarding the orange color, that was a typo on my part. Originally I was going to suggest an orange color, but changed that to blue at a later point, and did not notice that there was still a reference to orange in the note.

1 - Reconsidering this, I actually think that these buttons might be "overkill" -- meaning unnecessary. For now, let's try removing these two buttons and replacing them with a silver "Close" button. The "Close" button should always just remove the overlay but not the notification. The only way for the client to remove the notification will be to click the Close button at the right edge of the notification itself. I think this will be the cleanest and most intuitive solution for users.

2 - Yes, I see why that would be. It's fine to sort only on Date Posted and Headline -- that should be sufficient.

3 - Great

4 - A couple of small final tweaks:

a. Please increase the padding between the edge of the notification text and the "Read More" link to 12px.

b. Looking again at the Twitter example, I can see that it would be useful to be able to include links in the notifications themselves (in the blue bar) rather than only in the overlay.  Can you change the current "Headline" text input to be a TinyMCE text editor instance?  We only need very basic functionality on that tool bar -- basically just Bold and then the link capability -- but it's fine to include the full toolbar if that's easiest.

Once those small changes are made, please push this out to the live site when you have time.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

Battler45 commented 4 years ago

Ben,

I've updated notification message styles per comment-25, for both overlay and content editor. Please check this.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

Battler45 commented 4 years ago

Vihang,

Upon expiration, I think we should retain the data in the database, but simply hide those notifications from view. In the UserNotifications table, we will only be retaining data on which users have viewed (or Closed) which notifications, correct? It might be useful at some point to be able to track our response rate so see if changes to the user interface improve it over time.

Also, we had one more thought about targeting specific users. In addition to site type, admin user level, and mls region, can we also target site distribution type? So, for example, with the new tooltip functionality you just added, we would want to target only managers & above of those sites that have their distribution type set to either hierarchical or round robin.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

Battler45 commented 4 years ago

Vihang,

Yes, despite my original specification, I do believe 15 days is sufficient to display notifications. Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

Battler45 commented 4 years ago

Ben,

I've added DateViewed column and updated Mange Notifications page to show Total Viewed.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

Battler45 commented 4 years ago

Vihang,

Thanks, it looks and is working great. I especially appreciate how you were able to make the notification bar static when the user scrolls down the page -- very nice.

I can't remember what we decided about "expiration" of the notices -- will they automatically drop off of user's screens 2 weeks from the original post date?

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)