On successful submission of create campaign form, there's no success message

[phalkunz]

Original issue

The reason is user is redirected to the edit form so the message set on create form never gets a chance to show it to user.

@tractorcow said:

Store the message in redux and show it then
you'll need a custom state / message handler for campaign admin
otherwise, you'll need a way of making the create-form set the success message on the edit form
...
Easiest solution is to make the submit handler for create set a session message on the edit form
but i say that's the easiest, because it can be done in php 😄
best way is to do it in JS and not rely on session

Related: silverstripe/silverstripe-framework#5464

Acceptance criteria

• Once a campaign has been successfully created the user is directed to the (empty) campaign view and reassured the campaign has been created with a success message on the newly created campaign
• The user has a clear indication of what to do next (eg. adding content to the campaign), and how to add items from the newly created campaign
• The campaign is not publishable until there is content in the campaign
• When a user navigates to a campaign they are presented with guides on how to use the campaign
• The user has the option to select an item from the campaign (if items exist) so they can preview them
• When campaign settings are edited and then saved there is a clear indication that they have been saved

Tasks

• User flow provided to guide development
• The "Add campaign" button is updated to have the label "Add new", as per pages pattern
• The "Save" button on the create campaign form is updated to have a "Create" label
• Show empty sections within the campaign for Pages and Files, and provide a prompt to add content
• Add visual (to be provided) to the initial view of a campaign—regardless of whether it is a new campaign or not
• Designer to provide the visual to go in place of the preview panel
• On the campaign settings edit screen the save button (when clicked) label updates to "Saved" with a tick icon
• If the campaign settings are edited we detect the changes and swap the action label (and colour) from "Saved" to "Save as per page actions when saved/published
• The "Publish campaign" button is disabled if there is nothing in the campaign

Designs

Interactive mockup to outline the new flow https://invis.io/S4CMLL6J2#/243581682_Add_Campaign_6

Design Asset:

Pull requests

• FIX Create campaign success message #37
• Custom alert style silverstripe-admin#167
• Enhancement add pages as a placeholder for an empty campaign silverstripe-cms#1918
• Enhancement add files as a placeholder for an empty campaign silverstripe-asset-admin#573

[clarkepaul]

UI notes:

• Success message should appear top right of viewport
• Unlike a success message, validation messages should appear in context of the form

Related issues:

• There is a separate issue for the campaign name to replace "Edit campaign" Edit campaign page title should update to actual campaign title #24
• The save button text should update to "Saved [green text]" like the pages buttons if saved successfully, but change back to "Save [green background]" if further changes are detected. see Save button on add/edit campaign should update to "Saved"  #25

[chillu]

@clarkepaul Building a component which overlays a success message on the top right will require a bit of work, and I don't think the status quo is a great UX: They overlap interaction elements and look out of place. Example of the "split screen" message, which I think is the same as success and validation messages:

I'd prefer dismissable full-width messages. They push down the content, but look less out of place - in particular if you consider them on mobile resolutions. What do you think? Rough mockup:

[tractorcow]

I like the new mockup. It's easy to see and doesn't automatically disappear. :)

[phalkunz]

This issue should be a story because showing success message should be a generic form behaviour and requires a bit more thinking. Also, I notice the success of message of Edit Form is now no longer working.

[clarkepaul]

You have to remember that there is a pattern we are trying to establish with a response via the button itself as that is where the eye is initially looking. There are types of messages which make sense to be quickly notified and then disappear so they don't clutter the interface too much, especially ones where repetitive actions are actioned. If the page contents jump every time you select an action because of a notification the user needs re-look at the entire page as they won't know what is the extent of what's changed as everything moves, this adds to the time the eye/brain needs to compute what's going on. Content moving on a page is a well known UX pattern to avoid if possible, although there will be times when it does make sense (eg if a user is taken to a new screen based on an action with a success message telling you something has updated).

I would like to create a UX distinction between when in-page notifications are used and when temporary notification styles make more sense.

In the campaign editing and saving scenario, I feel the better pattern on successful save is the notification top right as the page contents don't change with save. If we went with in-page notifications which disappear after x-time the page is just moving up and down every time you save.

IMHO the disappearing notifications do need improvements though as you should be able to retrieve them if they pass too quickly.

[chillu]

Thanks for taking the time to explain the UX reasoning for this Paul - I agree :)

I think there's a few types:

• Info-level success feedback (no action required). Example: "Page saved", "Approval request sent"
• Warning-level feedback (no action required). Example: "Another person has started editing this page", "CMS will be down for maintenance in five minutes"
• Validation feedback (action required). Example: "Field A is required. Field B needs to be a number"
• Error-level feedback. Example: "The submission failed due to an unknown server error"

There's various ways to deal with those types:

• Button interaction feedback
• Auto-fading overlays
• In-context message (e.g. above form). Optionally dismissable
• App-wide message (e.g. on top of window)

We don't need to solve these all here, but it would be good to come up with a consistent approach in a new, wider ticket @clarkepaul

Note that I've raised something quite similar in 2012 :D silverstripe/silverstripe-cms#344

[clarkepaul]

I think the best approach to resolving the issue here is to update the button text and appearance from "Save" to "Saved" along with the tick icon and button colour change as per pages save button.
If the content is edited again then the button should reflect these changes so there is an indication there are unsaved changes.

In the original mock we had a lot going on within this screen hence it needing its own area but in its current state it would make more sense to make the add/edit campaign form a modal which closes upon save.

[chillu]

I think the best approach to resolving the issue here is to update the button text and appearance from "Save" to "Saved" along with the tick icon and button colour change as per pages save button.

Shouldn't the button really say "Create"? It would be consistent with both "add page" and GridField (e.g. "add member"). And in that case, does switching from "Create" to "Saved" still make sense? GridField has a persistent "Saved " message after creation. Whatever we do in CampaignAdmin should align with that. I think there's a general need for different form notification levels in the CMS, as outlined in my last comment.

@clarkepaul Could you have a bigger picture look at this please, and create enhancement tickets to make this consistent?

[clarkepaul]

@chillu Regarding the bigger picture, yes its already on my radar but that isn't a quick thing. Originally I designed this with a "Create" label but the add/edit form was first implemented as a single form so a single label "Save" had to be used. It has more recently been split into to different forms meaning we can use different labels again for the buttons (good spotting), and yes I think it does still make sense to have the different labels but it does need more time as some of these patterns aren't simple.

Regardless of the wider notification patterns, providing feedback upon save is a given and is an established pattern in the CMS. I think its a good idea to continue with the button feedback turning to "Saved" and follow up with the rest at a later stage. Happy to move this out of this BETA but I think its still a good improvement.

[clarkepaul]

FYI I just checked adding Campaigns again and if you click save twice there is a saved notification.

[unclecheese]

This is currently blocked by https://github.com/silverstripe/silverstripe-framework#7226

[unclecheese]

This has been rebased to silverstripe/silverstripe-admin#175