* '''Written:''' <<Date(2006-03-22T18:51:10Z)>> by MatthewPaulThomas 

The Launchpad Web app now supports four kinds of alert messages: error messages, warning messages, informational messages, and debugging data. `AddForm`, `EditForm`, and `GeneralForm` use these automatically, but sometimes you'll have to use them yourself (instead of the old `portalError` and `portalMessage` CSS classes).

== How to roll your own alerts ==

||<tablestyle="background-color: #f0cccc; color: black; padding: 0.5em; width: 100%;" style="border: none;width:3em;"> {X} ||<style="border: none;">`<p class="error message">` <<BR>> The action you asked for didn't succeed.||

||<tablestyle="background-color: #fcdd99; border: none; color: black; padding: 0.5em; width: 100%;" style="border: none; width:3em;"> /!\ ||<style="border: none;">`<p class="warning message">` <<BR>> You're in danger of losing significant time, work, or privacy (perhaps by inattention or a possible mistake).||

||<tablestyle="background-color: #fcfc99; border: none; color: black; padding: 0.5em; width: 100%;" style="border: none;width:3em;"> {i} ||<style="border: none;">`<p class="informational message">` <<BR>> Something unusual but not dangerous has happened, such as successfully creating something.||

||<tablestyle="background-color: #666; border: none; color: white; padding: 0.5em; width: 100%;" style="border: none;width:3em;"> {i} ||<style="border: none;">`<p class="debugging message">` <<BR>> This should never appear in production.||

If you want to highlight a form field with an error message underneath, use the classes separately.

||<tablestyle="background-color: #f0cccc; color: black; padding: 0.5em; width: 100%;" style="border: none;"> '''`<div class="error">`''' <<BR>> [__Here's a form field with an error in it.__] <<BR>> {X} '''`<div class="message">` There is no product with that name.'''||

== Testing that you've used the correct alert style ==

When you write tests for a page containing an alert message, include the type of alert in the expected output. For example: {{{
  ...error message...
  ...There is no product with that name.
}}}
{{{
  ...warning message...
  ...There is no branch with that name. Continuing will register this branch automatically.
}}}
{{{
  ...informational message...
  ...Thank you for your bug report!
}}}