#elmlang – Navigating the pages – part 2 Update

In our previous blog we looked at the model side of the application when building SPA with navigation. In this blog we will look at the update.

To summarize the model changes, when building SPA with navigations are

  • The model need to know the current page
  • Instead of representing the page as string, in Elm explicitly state the page by union type
  • Setup initial page that we need to load during application start up

In update, there are two things we need to do

  • Define all the events our application is going to support
  • Define the actions when the events occur

Defining events:

In our navigation program, we moved away from beginnerProgram and now we are using Navigation.program. As mentioned in the previous blog, this function has all the goodies of beginnerProgram and more. When we use Navigation.program, one of the things it does when ever there is a change in url, it will trigger an event called UrlChange with location details. Since we removed all the noise in the application, UrlChange is the only event we are interested in. So let’s define the events

type Msg

    = UrlChange Navigation.Location

Anytime when a user clicks a hyperlink in a program which triggers a url change, Navigation function will trigger UrlChange event with all the information regarding the new url and its attributes. Everything regarding how to fire the event are all wrapped up in the Navigation package.

Define actions:

When a user clicks a hyperlink to go to a new page, on clicking a hyperlink, navigation function will create a event called UrlChange with the new location the user wants to go to. Anytime a new event is fired, our update function will be called first and there we need to satisfy user request. Update is where we act on the url change request. Let’s take a moment to talk about what are the things we would need to display a new page

  • in Elm architecture, one will not call render page directly
  • In Elm architecture, you modify the model which will trigger rendering a page
  • In update all we need to do is identify the page user is intending to go and modify the current page with page user’s requested page

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
     case msg of
         UrlChange location –>
             ({ model | page = (findpage location.hash) },  Cmd.none )

As usual we are updating the model with appropriate value in update. When someone clicks on the hyperlink, the clicked hyperlink string will be available in the location.hash we will use that to identify the page user wants to navigate to. Identifying the page user wants to navigate is encapsulated in the findpage function as shown below

findpage: String –> Page

findpage hash =

    case (hash) of

         “#alltimebest” –>


          “#login” –>


            – ->


This is a very simple function, which takes url location as input string and returns the page union type.

In summary, when using Navigation.Program,

  • one clicks a navigation link, elm will trigger UrlChange event with the url link user clicked
  • when an event is fired, elm will call programs update function
  • in update function identify the page user wants to navigate to and update the model with page name
  • when a model is update rendering page will be triggered by calling view

In the next blog we will see how to modify the view to handle page navigation


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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s