/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ p: "p", a: "a", h2: "h2", code: "code", pre: "pre", span: "span", img: "img", ol: "ol", li: "li", h3: "h3", div: "div", svg: "svg", path: "path", h5: "h5", strong: "strong", ul: "ul" }, _provideComponents(), props.components); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Hi there!\nI have here the simple registration form implemented, and depending on the form validation result, I'd love to show the flash message at the top of the page, indicating if account creation was successful or not." }), "\n", _jsxs(_components.p, { children: ["Rendering flash messages is not hard at all in Hanami 2, and when you visit the ", _jsx(_components.a, { href: "https://guides.hanamirb.org/v2.1/introduction/building-a-web-app/#creating-a-book", children: "official getting started guides" }), ", you'll see exactly an example of how to do it in a very straightforward way."] }), "\n", _jsx(_components.h2, { id: "rendering-flash-messages", children: "Rendering flash messages" }), "\n", _jsxs(_components.p, { children: ["The easiest way to show flash messages in your app is like this so let me start by copying the code from the official guides to a new partial, named: ", _jsx(_components.code, { children: "flash_msg" }), ". I already have the session enabled so I'll skip this step."] }), "\n", _jsxs(_components.p, { children: ["However, because in this series", _jsx(_components.a, { href: "/episodes/3-style-your-app-with-bulma", children: " I am working with Bulma CSS" }), " framework, I'll add some HTML sugar on top of it, so the actual rendering will be pretty out of the box, so you'll more likely subscribe to the future content I produce."] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-ruby", children: [_jsx(_components.span, { className: "hljs-comment", children: "# main/slice/templates/layouts/_flash_msg.html.erb" }), "\n<% ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " flash[", _jsx(_components.span, { className: "hljs-symbol", children: ":notice" }), "] %>\n

Render flash messages in Hanami, but like a PRO

Episode #52

Comments and discussion links

Trusted & Supported by