#elmlang – Navigating the pages – part 3 View

So far we have seen the Model and Update part of the navigation application. In this blog we complete the whole project by connecting the final missing piece View.  First let’s look at the output

First two line on the screen are the two links. One to ‘All Time Best’ and another to ‘Login’. By default ‘All Time Best’ is set as Home and if we pass any routes other than ‘Login’ all routes will be routed to ‘All Time Best’. On page load the page will look like the following; It loads ‘All Time Best’ view


When you click ‘Login’, it will display the following


In this example if you notice, we have two sections, one is the top section, which contains hyperlinks to navigate and then the view right below it to show the content of the page. For sake of simplicity, we call the top section as header and the second part as body. So view will contain the header and body

view: Model –> Html Msg

view model =

    div []

           [ header

           . body model


As like all the Elm application, view takes model as input and generates the Html that can generate messages. Model has two functions, first one is header and second one is body which takes model as parameter.

Let’s review header function first.

header: Html Msg

header =

     div []

            [ h3 []

                    [ a [ href “#alltimebest” ] [ text “All Time Best “ ]

                    , a [ href “#login” ] [ text “ Login” ]



header function takes no parameter but generates Html. This function creates two hyperlink (a tag). Only thing we need to pay attention to is the first parameter to href function. This string must match the strings in update function.

case (hash) of
       “#alltimebest” ->

      “#login” ->

Next let’s define the body function

body:Model –> Html Msg

body model =

     case (model.page) of

             AllTimeBest –>

                   alltimebest model

             Login –>

                   login model

As you can imagine we need to make sure we display appropriate body based on the page requested. During update function all we did was to change the page to appropriate page in the model but we did not display anything. In view we need to make sure based on the page information in the model we need to render appropriate content.

Based on the output we saw earlier, the alltimebest and login function has nothing but a text to show page change happened. The function definitions of the pages are below

alltimebest: Model –> Html Msg

alltimebest model =

       h1 [] [ text “All Time Best” ]

login: Model –> Html Msg

login model =

    h1 [] [ text “Login “]

Events leading up to view are

  • When someone wants to change a page, they click on the hyperlink
  • when hyper link is clicked, elm generates navigation message (UrlChange)
  • The message triggers update function
  • In update function based on the urlchange request, we create new model with the page type requested
  • On completion of model change, view function is called
  • view will turn around and call the body function with current model
  • In body function, we check the model’s page type. If the page type is AllTimeBest then we call ‘alltimebest’ function to create Html otherwise we call Login

In summary, navigation is very easy and simple in Elm. The things we need to know are

  • Use Navigation.program to connect Model, Update and View
  • Have Model with the field which can hold current page
  • In update handle Urlchange event with location parameter to change the Model
  • In view, use the Model’s current page to render the page in question

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s