bodhilogic

bodhilogic

How to display Flash Messages in Different Colors

I want to use the full gamut of Bootstrap Alert ‘types’ (and their associated colors);
primary, secondary, success, danger, warning, info, light and dark.

In Phoenix:
put_flash(:info, message) displays a Bootstrap ‘info’ alert
put_flash(:error, message) displays a Bootstrap ‘danger’ alert

I’ve tried a put_flash(:success, message) command but it results in no flash message being displayed.

Some Questions:
Why does Phoenix translate an :error type to :danger? It results in the coloring I would have expected but wouldn’t it have been easier(?) to set the CSS class in strict accordance with the Bootstrap CSS classes? I realize that not everyone utilizes Bootstrap so they may feel a bit ‘left out in the cold’.

With the above being the case, is there a way to build a transformation process for Phoenix such that, if you are using Bootstrap, use the first argument (an atom) of the put_flash/2 function as the CSS alert-X class to be used for displaying the flash message?

Examples:

put_flash(:success, "The Message") 
<p class="alert alert-success" role="alert">The Message</p>

put_flash(:warning, "The Message") 
<p class="alert alert-warning" role="alert">The Message</p>

Marked As Solved

voughtdq

voughtdq

This is an (untested) example of how you could get whatever flash key and flash message you’d like and then display it with the boostrap conventions you’re describing. layout.html.eex only has templating to display :info and :error by default.

<%= Enum.map(get_flash(@conn), fn {flash_key, flash_message} -> %>
  <p class="alert alert-<%= flash_key %>"><%= flash_message %></p>
<% end) %>

Also Liked

NobbZ

NobbZ

This is from a default app-layout:

      <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
      <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>

So, as you can see, there is no magic involved in the defaults, they are very explicit, and I usually rewrite this into a loop and a conditional.

voughtdq

voughtdq

All put_flash does is store a text string in conn.private under the :phoenix_flash key. You can display the message however you’d like by changing it in layout.eex.html

bodhilogic

bodhilogic

Ahhh! Thanks people!! Its easy once you know to look in the obvious places.

I found these lines in the layout.html.eex file:

  <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
  <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>

With voughtdq’s example I should be good to go.

Thank you for your time and helpful answers!!

Where Next?

Popular in Questions Top

nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
tduccuong
Hi, is there any work on GUI with Elixir, that is similar to Electron/Javascript? My idea is to bundle Phoenix and BEAM into a single se...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
vac
Hi, I’m quite new in Elixir and I’m trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and I...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
yawaramin
In the Dialyzer docs ( dialyzer — OTP 29.0.2 (dialyzer 6.0.1) ), there is a way to turn off a specific warning for a function: -dialyzer...
New

Other popular topics Top

mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement