Axure RP Prototyping Cookbook

4 (1 reviews total)
By John Henry Krahenbuhl
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Prototyping Recipes

About this book

Axure has quickly become one of the leading tools for rapid prototyping in use today. Driving Axure’s popularity and wide spread adoption is the ability to iteratively develop interactive HTML prototypes of websites and applications. With the AxShare cloud-based service, prototypes are easily shared amongst clients and team members. Prototypes can even be viewed on Android, iPhone, and iPad, appearing like a native application.

This guide provides fast, practical, step-by-step recipes to create your own custom prototypes for mobile and desktop. You can now easily create your mobile-first designs as well as responsive and adaptive web design interactions. Using real-world examples developed from today’s hottest technological trends, you can take your skills to the next level!

This book takes you through the latest methods to create Adaptive Web Layouts (AWD) with Axure RP 7 Pro, and create widgets for Responsive Web Layouts (RWD). Prototyping for mobiles will now be easier as you will be able to include jQuery Mobile into your Axure Prototypes. You will learn to connect to Social Media sites such as Facebook, Twitter, YouTube, and Pinterest and create ecommerce order checkout flows to make your prototypes come to life. With this book and Axure RP Pro, you will witness increased productivity in your team by leveraging Axure Team Projects.

You will see how to create custom templates for specifications to impress your clients, create Masters and build your own custom Widget libraries. You will learn to use AxShare to quickly share password protected prototypes with clients and teammates, and explore integrate Axure Prototypes with external JavaScript Libraries.

Finally, you will be able to setup Android and iPad/iPhone emulators to quickly view your prototypes and run them native on Android, iOS and Windows 8.1 devices. By applying the recipes in "Axure RP Prototyping Cookbook", your prototypes on your iPhone, iPad, Android device, or browser will have never looked better!

Publication date:
January 2014
Publisher
Packt
Pages
300
ISBN
9781849697989

 

Chapter 1. Prototyping Recipes

In this chapter, we will cover a few basic Axure prototype recipes. You will learn:

  • Sketching, scanning, and prototyping

  • Creating a dynamic Breadcrumb Master

  • Generating a dynamic welcome message

  • Creating a carousel with Dynamic Panel state actions – next and previous

  • Building a fixed Contact Us widget

  • Prototyping a Frequently Asked Questions (FAQ) page

  • Validating user input

  • Adding an enabled submit button to form fields

  • Sending form data to Salesforce

 

Introduction


Axure is a leading tool for creating requirement specifications as well as generating interactive HTML wireframes and UI mockups. It is easy to use Axure and add advanced interactions to your wireframes. This chapter will show you a simple, effective method to make your sketches come to life as interactive prototypes. You will also learn how to create a carousel as well as intermediate concepts.

 

Sketching, scanning, and prototyping


Most folks start the design process by developing quick sketches of the concepts. These sketches can be elaborate or rudimentary. Oftentimes, these sketches evolve into paper prototypes that illustrate the flow or steps a user would take to complete a task. By scanning your drawings, making adjustments with your favorite image editing software (Gimp, Adobe Photoshop, and so on), and Axure, you can quickly create a clickable prototype.

Getting ready

To go through this recipe, you will need to have digital scans of your sketches and access to the image editing software of your choice.

How to do it...

You will now create a carousel including thumbnails from digital scans of simple, freehand-drawn sketches.

  1. Using your image-editing tool, first organize your images and crop them appropriately. You will have to organize the images and visualize the user flow just as you would do for paper prototypes.

  2. Start Axure and under Create New select RP File.

    Note

    If you already have Axure open, select File in the main menu, and then click on New, in the drop-down menu to create a new RP document.

  3. In the Sitemap, add additional child or sibling pages as necessary to complete your flow by clicking on the Add Page button icon or by right-clicking on any page in the sitemap. In the menu that appears, mouse over Add, and then click on the Child or the Sibling page.

  4. Double-click on any page title in Sitemap to select that page. You will see the wireframe for the associated page shown.

  5. While holding down the mouse button, drag the Image widget, and place it on the wireframe.

  6. Double-click on the Image widget on the wireframe, and select the appropriate scanned sketch.

  7. While holding down the mouse button, drag the Hot Spot widget, and place it over the item you would like to make clickable.

  8. While holding down the mouse button, drag the corners of the Hot Spot widget on the wireframe to the desired size.

  9. With Hot Spot selected, in the Widget Interactions and Notes pane, click on Create Link….

  10. In the Sitemap pop up, click on the associated page in the user flow.

  11. Repeat steps 7 through 10 for each region on your wireframe that you would like to make clickable.

  12. Repeat steps 4 through 11 for each page in Sitemap that you would like to make a part of the prototype.

  13. You can now choose to preview or save a copy of the prototype. To preview the prototype, click on the Preview button in the toolbar. To save a copy of the prototype, click on the Publish button in the toolbar, and select Generate HTML Files…. You can also generate the prototype by going to the main menu, selecting Publish, and clicking on Generate HTML Files….

How it works...

Using this recipe, you are able to convert your paper sketches into clickable digital prototypes. Each paper sketch becomes a page in the Sitemap through the use of the Image widget. To accomplish this, you opened the scanned image with the Image widget to display your paper sketch on the page.

To create clickable regions, you used Hot Spot and associated the next page in the flow using Create Link…. You used as many image map regions as clickable elements needed for the interactions on a page.

 

Creating a dynamic Breadcrumb Master


Using Masters in Axure allows you to create reusable components. When you make a change to a Master, the change is applied to all wireframes that contain that Master. Leveraging Masters can ensure the consistency of elements across your prototypes.

Getting ready

In this recipe you will create a dynamic Breadcrumb Master.

Note

In Axure, verify that the Widget Manager and Page Properties panes are shown. To verify, click on View in the main menu and mouse over Panes. In the pop-up menu, make sure that a check mark is next to all items, including the Widget Manager and Page Properties panes.

How to do it...

To create a dynamic Breadcrumb Master, first you will create new pages in your sitemap and three empty Masters (for example, Template, Header, Menu, and BreadCrumb). Next, you will place widgets on the Header, Menu, and BreadCrumb Masters. You will then place the Header, Menu, and BreadCrumb Masters onto the Template Master. Finally, you will drag the Template Master to all of the pages in Sitemap.

  1. Start Axure and under Create New select RP File.

  2. In the Sitemap create pages as follows:

  3. In the Masters pane, create four individual Masters, titled: Template, Header, Menu, and BreadCrumb, respectively, as shown in the following screenshot:

  4. Right-click on each Master you created in step 3, mouse over Drop Behaviour, and click on Lock to Master Location. This will cause the widgets in each Master to maintain the x and y coordinates no matter where the Master is placed in a wireframe.

  5. In the Masters pane, double-click on the Header Master to select it.

  6. While holding down the mouse button, drag the Placeholder widget, and place it on the wireframe.

  7. With the Placeholder widget selected, type Home, and change the x: 10, y: 12, w: 96, and h: 30 (present at the top-left of the window).

  8. In the Widget Interactions and Notes pane, click on the Shape Name text field, and type HomeLink.

  9. While holding down the mouse button, drag the Label widget, and place it at the coordinates (130,18) on the wireframe.

  10. With the Label widget selected, perform the following steps:

    1. Type BreadCrumb Prototype.

    2. In the Widget Interactions and Notes pane, click on the Shape Name text field, and type HeaderLabel.

  11. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 18 by clicking on the font size dropdown, mouse over 18, and click to select:

  12. In the Masters pane, double-click on the Menu Master to select it.

  13. While holding down the mouse button, drag the Classic Menu - Horizontal widget, and place it at the coordinates (10,52) on the wireframe.

  14. In the Widget Interactions and Notes pane, click on the Menu Name text field, and type MainMenu.

  15. To name and link the primary menu item, perform the following steps:

    1. Click on the first menu item labeled File to select it, and type Primary.

    2. In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and type MenuPrimary.

    3. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….

    4. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenPrimaryPage.

    5. In Click to add actions, click on Open Link.

    6. In Organize actions, you will see the interaction description update to Open Link in Current Window.

    7. In Configure actions, click on the radio button next to Link to a page in this design, and then click on Primary Page.

    8. Click on OK.

    9. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 16 by clicking the font size dropdown, mouse over 16, and then click on it to select.

  16. To name and link the category menu item, perform the following steps:

    1. Click on the second menu item, labeled Edit, to select it, and type Category.

    2. In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and type MenuCategory.

    3. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….

    4. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenCategoryPage.

    5. In Click to add actions, click on Open Link.

    6. In Organize actions, you will see the interaction description update to Open Link in Current Window.

    7. In Configure actions, click on the radio button next to Link to a page in this design, and then click on Category page.

    8. Click on OK.

    9. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 16 by clicking the font size dropdown, mouse over 16, and then click on it to select.

  17. To name and link the content menu item, perform the following steps:

    1. Click on the third menu item labelled View to select it, and type Content.

    2. In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and type MenuContent.

    3. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….

    4. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenContentPage.

    5. In Click to add actions, click on Open Link.

    6. In Organize actions, you will see the interaction description update to Open Link in Current Window.

    7. In Configure actions, click on the radio button next to Link to a page in this design, and then click on Content Page.

    8. Click on OK.

    9. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 16 by clicking the font size dropdown, mouse over 16, and click on it to select it.

  18. To add a submenu item, right-click on the Primary menu item, and click on Add Submenu:

  19. Click on the first submenu item, and enter Secondary, and then perform the following steps:

    1. In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and type MenuSecondary.

    2. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….

    3. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenSecondaryPage.

    4. In Click to add actions, click on Open Link.

    5. In Organize actions, you will see the interaction description update to Open Link in Current Window.

    6. In Configure actions, click on the radio button next to Link to a page in this design, and then click on Secondary Page.

    7. Click on OK.

  20. Right-click on the second and third submenu items, and click on Delete Menu Item.

  21. Click on the submenu item Secondary to select it, and perform the following steps:

    1. Right-click on Secondary, and click on Add Submenu.

    2. Click on the first submenu item, and enter Tertiary.

    3. In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and type MenuTertiary.

    4. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….

    5. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenTertiaryPage.

    6. In Click to add actions, click on Open Link.

    7. In Organize actions, you will see the interaction description update to Open Link in Current Window.

    8. In Configure actions, click on the radio button next to Link to a page in this design, and then click on Tertiary Page.

    9. Click on OK.

    10. Right-click on the second and third submenu items, and click on Delete Menu Item.

  22. Click on the submenu item Category to select it, and perform the following steps:

    1. Right-click on Category, and click on Add Submenu.

    2. Click on the first submenu item, and enter Product Detail.

    3. In the Widget Interactions and Notes pane, click on the Menu Item Name text field, and then type MenuCategory.

    4. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….

    5. In the Case Editor (OnClick) pop up, in Case description, rename the case description to OpenCategoryPage.

    6. In Click to add actions, click on Open Link.

    7. In Organize actions, you will see the interaction description update to Open Link in Current Window.

    8. In Configure actions, click on the radio button next to Link to a page in this design,and then click on Category Page.

    9. Click on OK.

    10. Right-click on the second and third submenu items, and then click on Delete Menu Item.

  23. In the Masters pane, double-click on the BreadCrumb Master to select it.

  24. While holding down the mouse button, drag the Dynamic Panel widget, and place it on the wireframe.

  25. Change the x: and y: coordinates and w: and h: to be:

  26. With the Dynamic Panel selected, perform the following steps:

    1. In the Widget Interactions and Notes pane, click on the Dynamic Panel Name text field, and then type BreadCrumb.

    2. In the Widget Manager, rename State1 Home.

    3. Add states to Dynamic Panel as follows: Primary, Secondary, Tertiary, Category, Product, and Content.

  27. With Dynamic Panel selected, perform the following steps:

    1. Double-click on the state labeled Primary in the Dynamic Panel Manager.

    2. While holding down the mouse button, drag a Label widget and place it on the wireframe at coordinates (0,6).

    3. Enter Home as the text on the Label widget.

    4. In the Widget Interactions and Notes pane, click on the Shape Name text field, and then type HomeBreadCrumbLink.

    5. In the Widget Interactions and Notes, pane click on the Interactions tab, and then click on Add Case….

    6. In the Case Editor (OnClick) pop up, in Case description, rename the case description OpenHomePage.

    7. In Click to add actions, click on Open Link.

    8. In Organize actions, you will see the interaction description update to Open Link in Current Window.

    9. In Configure actions, click on the radio button next to Link to a page in this design, and click on Home page.

    10. Click on OK.

  28. You will now focus on building the Dynamic Panel states Primary, Secondary, Tertiary, Category, Product, and Content. The following screenshot shows what the Primary state will look like:

  29. To build the Dynamic Panel states Primary, Secondary, Tertiary, Category, Product, and Content, with the Dynamic Panel selected perform the following step:

    1. Repeat step 27, changing the step each time with the following information:

      Panel State

      Coordinates for Label Widget

      Label Text

      Shape Name

      Case description

      Configure Actions Link to

      Primary

      (0,6)

      Home

      HomeBreadCrumbLink

      OpenHomePage

      Home

      Primary

      (55,6)

      Primary

      PrimaryBreadCrumbLink

      OpenPrimaryPage

      Primary Page

      Secondary

      (0,6)

      Home

      HomeBreadCrumbLink

      OpenHomePage

      Home

      Secondary

      (55,6)

      Primary

      PrimaryBreadCrumbLink

      OpenPrimaryPage

      Primary Page

      Secondary

      (115,6)

      Secondary

      SecondaryBreadCrumbLink

      OpenSecondaryPage

      Secondary Page

      Tertiary

      (0,6)

      Home

      HomeBreadCrumbLink

      OpenHomePage

      Home

      Tertiary

      (55,6)

      Primary

      PrimaryBreadCrumbLink

      OpenPrimaryPage

      Primary Page

      Tertiary

      (115,6)

      Secondary

      SecondaryBreadCrumbLink

      OpenSecondaryPage

      Secondary Page

      Tertiary

      (200,6)

      Tertiary

      TertiaryBreadCrumbLink

      OpenTertiaryPage

      Tertiary Page

      Category

      (0,6)

      Home

      HomeBreadCrumbLink

      OpenHomePage

      Home

      Category

      (55,6)

      Category

      CategoryBreadCrumbLink

      OpenCategoryPage

      Category Page

      Product

      (0,6)

      Home

      HomeBreadCrumbLink

      OpenHomePage

      Home

      Product

      (55,6)

      Category

      CategoryBreadCrumbLink

      OpenCategoryPage

      Category Page

      Product

      (125,6)

      Product Detail

      DetailBreadCrumbLink

      OpenDetailPage

      Product Detail Page

      Content

      (0,6)

      Home

      HomeBreadCrumbLink

      OpenHomePage

      Home

      Content

      (55,6)

      Content

      ContnetBreadCrumbLink

      OpenContentPage

      Content Page

  30. To populate the Template Master with the component masters (for example, Header, Menu, and BreadCrumb Masters), perform the following steps:

    1. In the Masters pane, double-click on the Template Master to select it.

    2. While holding down the mouse button, drag the Header Master, and place it anywhere on the wireframe.

      Note

      In step 4, you specified Lock to Master Location for the Drop Behaviour of each Master. This causes the widgets in each Master to maintain their x and y coordinates no matter where the Master is placed in a wireframe.

    3. While holding down the mouse button, drag the Menu Master, and place on the wireframe.

    4. While holding down the mouse button, drag the BreadCrumb Master, and place it on the wireframe.

  31. While holding down the mouse button, drag the Template Master, and place it anywhere on the wireframe. The Template Master will align to the fixed X and Y coordinates.

  32. Below the wireframe, click on the Page Interactions tab, and double-click on the OnPageLoad interaction. In the Case Editor (OnPageLoad) pop up, perform the following steps:

    1. In Case description, rename the case description SetBreadCrumbState.

    2. In Click to add actions, click on Dynamic Panels to expand, and then click on Set Panel State.

    3. In Organize actions, you will see the interaction description update to Set Panel to State.

    4. In Configure actions under Select the panels to set the state, click on the checkbox next to the Label for the Breadcrumb (Dynamic Panel).

    5. Click on the Select the state dropdown, and mouse over Home. Click on Home to select it.

    6. You will see the interaction description under Organize actions update to read.

    7. Set Template/BreadCrumb/BreadCrumb Home.

    8. Click on OK.

  33. Repeat steps 30 to 32 for the remaining pages in Sitemap, modifying each OnPageLoad case to set the BreadCrumb state to the appropriate panel state corresponding to the selected page in Sitemap (for example, for the Primary page, the corresponding state would be Primary, and so on).

  34. You can now choose to preview or save a copy of the prototype. To preview the prototype, click on the preview button in the toolbar. To save a copy of the prototype, click on the Publish button in the toolbar, and select Generate HTML Files…. You can also generate the prototype by going to the main menu, selecting Publish, and clicking on Generate HTML Files….

How it works...

For this recipe, you used Masters, a dynamic panel, a menu widget, and text widgets to create a dynamic BreadCrumb Master. You created four Masters: Template, Header, Menu, and BreadCrumb and set the behavior of each to Lock to Master Location. This retained the coordinates of the widgets placed on each Master when used on a page. The Template Master contained the Header, Menu, and BreadCrumb Masters. The Menu was labeled and linked to the corresponding pages in Sitemap. The BreadCrumb Master contained a dynamic panel that had a corresponding panel state for each of the pages in Sitemap. For each individual panel state, label widgets were used and linked to the corresponding page in the sitemap. When a page is loaded, the Page Interaction OnPageLoad event sets the state of the BreadCrumb dynamic panel to show the correct BreadCrumb state.

 

Generating a dynamic welcome message


Using variables, you can set widget values and text dynamically. For example, when a page loads, you could show the user a welcome message based on the day of the week.

Getting ready

In this recipe, you are going to explore using built-in variables in expressions. You will show the user a welcome message using the DayOfWeek variable.

How to do it...

Perform the following steps:

  1. Start Axure and under Create New select RP File.

    Note

    If you already have Axure open, select File in the main menu, and then click on New in the drop-down menu to create a new RP document.

  2. While holding down the mouse button, drag the Label widget, and place it on the wireframe at (53,13).

  3. With the Label widget selected, in the Widget Interactions and Notes pane, click on the field below Shape Name, and then type WelcomeText.

  4. In the Page Properties pane, click on the Page Interactions tab and double-click on the OnPageLoad interaction. The page will appear as shown in the following screenshot:

  5. In the Case Editor (OnPageLoad) pop up, in Case description, type DisplayMessage.

  6. In Click to add actions, click on Set Text.

  7. In Organize actions, you will see the interaction description update to Set Text.

  8. In Configure actions, under Select the widgets to set text, click in the checkbox next to Label for the Welcome Text (Shape).

  9. In Configure actions under Set text to, set the dropdown to value, and click on the fx button to bring up the Edit Text pop up.

  10. In the Edit Text popup, enter in the text field Welcome. Today is.

  11. Click on the Insert Variable or Function... link to open the drop-down menu; scroll to Date; click on Date to expand the selection; and click on getDayOfWeek(), as shown in the following screenshot:

  12. Click on OK.

  13. You can now choose to preview or save a copy of the prototype. To preview the prototype, click on the preview button in the toolbar. To save a copy of the prototype, click on the Publish button in the toolbar, and select Generate HTML Files…. You can also generate the prototype by going to the main menu, selecting Publish, and then clicking on Generate HTML Files….

How it works...

For this recipe, you used the Label widget, and using the Widget Interactions and Notes pane, you applied a label to the widget. Next in the Page Properties pane, you set a case on the OnPageLoad interaction to Set Variable/Widget value(s). Finally, in the Edit Text popup, you used a built-in variable.

There's more...

At times you may find that your Label widget is not displaying the built-in variable. One possible cause is that the length of the Label widget is not long enough to display all of the characters.

Note

For a list of variables available in Axure 7, visit http://www.axure.com/forum/tips-tricks-examples/8030-v7-variables-list.html

 

Creating a carousel with Dynamic Panel state actions – next and previous


Dynamic Panel widgets allow you to demonstrate interactions by showing, hiding, or swapping content. A Dynamic Panel consists of one or more panel states of which only one panel state can be shown at a time. When using Dynamic Panels, you can set the current panel state based on user interaction with additional widgets (for example, button).

Getting ready

You will use a Dynamic Panel and two button widgets to create a carousel. The left-hand side button widget will set the Dynamic Panel state to previous. The right-hand side button widget will set the Dynamic Panel state to next. There will be four states of the Dynamic Panel, states 1 to 4. You will also set the interactions on the button widgets to enable looping. For example, if the Dynamic Panel is at state 4, and the left-hand side button widget is clicked, the Dynamic Panel action will loop and show State 1, as shown in the following screenshot:

How to do it...

In this recipe, you will set the next and previous state of a Dynamic Panel based on user interaction with the button widgets.

  1. Start Axure and under Create New select RP File.

  2. While holding down the mouse button, drag the Dynamic Panel widget, and place it on the Home wireframe at (0,0).

  3. With Dynamic Panel selected, perform the following steps:

    1. In the Widget Interactions and Notes pane, click on the Shape Name text field, and then type Carousel.

    2. In the Widget Manager, double-click on State1 to select it.

    3. While holding down the mouse button, drag a Label widget, and place it on the wireframe at coordinates (55,20).

    4. With the Label widget selected, type State 1 as the text on the Label widget.

    5. In the Widget Interactions and Notes pane, click on the Shape Name text field, and then type LabelState1.

    6. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 28 by clicking on the Font size dropdown, mouse over 28, and then click on it to select it.

  4. With the Dynamic Panel selected, perform the following steps:

    1. In the Widget Manager, right-click on State1, and click on Add State. This will create a second state State2.

    2. Right-click on State1, and click on Add State two more times to create State3 and State4.

  5. With Dynamic Panel selected, perform the following steps:

    1. In the Widget Manager, double-click on State2 to select it.

    2. While holding down the mouse button, drag a Label widget, and place it on the wireframe at coordinates (55,20).

    3. With the Label widget selected, type State 2 as the text on the Label widget.

    4. In the Widget Interactions and Notes pane, click on the Shape Name text field, and then type LabelState2.

    5. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 28 by clicking on the Font size dropdown, mouse over 28, and click on it to select it.

  6. Repeat step 5, creating new Label widgets on State3 and State4 and labeling as appropriate.

  7. In Sitemap, double-click on Home to select the Home wireframe.

  8. While holding down the mouse button, drag the Button Shape widget, and place it on the wireframe at (13,69), changing the text to <, and w: to 31.

  9. With the Button Shape widget selected, in the Widget Interactions and Notes pane, click on the Shape Name field, and then type PreviousButton.

  10. In the Widget Interactions and Notes pane, with the Interactions tab selected, double-click on the OnClick interaction, and perform the following steps:

    1. In the Case Editor (OnClick) pop up, rename the Case description PreviousButtonClicked.

    2. In Click to add actions click on Set Panel State.

    3. In Organize actions, you will see the interaction description update to Set Panel to State.

    4. In Configure actions, under Select the panels to set the state, click on the checkbox next to the label for Carousel Dynamic Panel.

    5. Click on the Select the state dropdown, and mouse over Previous. Click on Previous to select.

    6. Click on the checkbox next to Wrap from first to last.

    7. You will see the interaction description under Organize actions update to read Set Carousel state to Previous wrap.

    8. Click on OK. The page will look like the following screenshot:

  11. While holding down the mouse button, drag the Button Shape widget, and place it on the wireframe at (152,69), changing the text to >, and the w: to 31.

  12. With the Button Shape widget selected, in the Widget Interactions and Notes pane, click on the Shape Footnote and Name field, and then type NextButton.

  13. In the Widget Interactions and Notes pane, with the Interactions tab selected, double-click on the OnClick interaction, and perform the following steps:

    1. In the Case Editor (OnClick) pop up, rename the Case description NextButtonClicked.

    2. In Click to add actions, click on Set Panel State.

    3. In Organize actions, you will see the interaction description update to Set Panel to State.

    4. In Configure actions under Select the panels to set the state, click on the checkbox next to the label for Carousel Dynamic Panel.

    5. Click on the Select the state dropdown, and mouse over Next. Click on Next to select.

    6. Click on the checkbox next to Wrap from last to first.

    7. You will see the interaction description under Organize actions update to read Set Carousel state to Previous wrap.

    8. Left-click on OK.

  14. You can now choose to preview or save a copy of the prototype. To preview the prototype, click the preview button in the toolbar. To save a copy of the prototype, click on the Publish button in the toolbar, and select Generate HTML Files…. You can also generate the prototype by going to the main menu, selecting Publish and clicking on Generate HTML Files….

How it works...

For this recipe, you used a Dynamic Panel, two Button Shape widgets and two text widgets. You used the two Button Shape widgets to control the previous and next states of Dynamic Panel. By using the Widget Interactions and Notes pane, you applied a label to the widget. For the Button Shape widgets, you used the Widget Interactions and Notes pane to create an OnClick interaction. Using Case Editor, you defined a Set Panel state(s) to State(s) action and selected either the Previous or the Next state. You also enabled the looping or wrapping of panel states from first to last.

You also created a number of states for our Dynamic Panel and edited the wireframes for each state. Clicking our Button Shape widgets would cause the Dynamic Panel to change state as defined for that Button Shape.

 

Building a fixed Contact Us widget


One popular design pattern in use today is leveraging fixed widgets on a page. A fixed widget remains in the same place on a web page when the user scrolls in the browser window. In Axure, you can create this effect by pinning a Dynamic Panel on a page.

Getting ready

In this recipe, you are going to build a fixed Contact Us widget.

How to do it...

Perform the following steps:

  1. Start Axure and under Create New select RP File.

  2. While holding down the mouse button, drag the Placeholder widget, and place it on the wireframe.

  3. Repeat step 2 to create a long vertical list (that is, 16 or more) of Placeholder widgets that will enable our prototype to have a vertical scroll bar.

  4. While holding down the mouse button, drag the Button Shape widget, and place it on the wireframe at (0,300).

  5. With the Button Shape widget selected, perform the following steps:

    1. Enter Contact Us.

    2. In the Widget Interactions and Notes pane, click on the Shape Name text field, and then type ContactUsButtonShape.

    3. In the Widget Properties and Style pane, click on the Style tab, and then click on Location + Size to expand.

    4. Click on the Left: field and enter -38.

    5. Click on the Rot: field and enter 90 to rotate the Button Shape widget.

    6. Click on the Text: field, and enter 270 to rotate the Button Shape widget text.

    7. Scroll down to Fills, Lines, + Borders, and click on the paint bucket icon drop-down menu.

    8. Click on the fifth vertical gray color block on the left-hand side. You will see the # field update with a value of CCCCCC.

  6. Right-click on the Button Shape widget in the wireframe pane, and click on Convert To Dynamic Panel.

  7. Right-click on the Button Shape widget in the wireframe pane, and click on Pin to Browser….

  8. In the Pin to Browser pop up, click on the checkbox next to Pin to browser window.

  9. Under the Horizontal Pin section, click on the radio button next to Left.

  10. Under the Vertical Pin section, click on the radio button next to Middle.

  11. Click on OK.

  12. You can now choose to preview or save a copy of the prototype. To preview the prototype, click the preview button in the toolbar. To save a copy of the prototype, click on the Publish button in the toolbar, and select Generate HTML Files…. You can also generate the prototype by going to the main menu, selecting Publish, and clicking on Generate HTML Files….

How it works...

For this recipe, you used a Button Shape widget. You used the Widget Interactions and Notes pane to rotate the Button Shape widget, rotated the Button Shape widget text, and applied a background color to the Button Shape widget. After moving the Button Shape widget in the wireframe pane, you then converted the Button Shape widget to a Dynamic Panel. Finally, you used the Pin to Browser... functionality of the Dynamic Panel to fix the converted Button Shape widget to the browser.

 

Prototyping a Frequently Asked Questions (FAQ) page


To prototype a Frequently Asked Questions (FAQ) page that jumps to an answer when a question is clicked, you can use the Scroll to Widget (Anchor link) action. The Scroll to Widget (Anchor link) action causes the browser to automatically advance to predetermined areas of a page. You will use Label widgets as anchors to scroll to.

Getting ready

In this recipe, you are going to build an FAQ page, as shown in the following screenshot, that advances to the answer when the user clicks on a question:

How to do it...

For this recipe, you will use Label widgets and a Horizontal Line widget. Perform the following steps:

  1. Start Axure and under Create New select RP File.

  2. While holding down the mouse button, drag the Label widget, and place it on the wireframe at (35,10).

  3. With the Label widget selected, perform the following steps:

    1. Type Frequently Asked Questions.

    2. In the Widget Interactions and Notes pane, click on the Shape Name text field, and then type FAQTop.

  4. In the Widget Properties and Style pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 16 by clicking on the Font size dropdown, mouse over 16, and then click on it to select it.

  5. While holding down the mouse button, drag the Label widget, and place it on the wireframe (for example, at coordinates (35,60)) and type 1. The first question goes here. Change w: to 300.

  6. With the Label widget selected, in the Widget Interactions and Notes pane in the Shape Name field, type Question1.

  7. Perform the following step to create Questions 2 to 12.

    1. Repeat steps 5 and 6 changing the steps each time using the following information:

      Coordinates

      Label Text

      Shape Name

      (35,100)

      2. The second question goes here.

      Question2

      (35,140)

      3. The third question goes here.

      Question3

      (35,180)

      4. The fourth question goes here.

      Question4

      (35,220)

      5. The fifth question goes here.

      Question5

      (35,260)

      6. The sixth question goes here.

      Question6

      (35,300)

      7. The seventh question goes here.

      Question7

      (35,340)

      8. The eighth question goes here.

      Question8

      (35,380)

      9. The ninth question goes here.

      Question9

      (25,420)

      10. The tenth question goes here.

      Question10

      (25,460)

      11. The eleventh question goes here.

      Question11

      (25,500)

      12. The twelfth question goes here.

      Question12

  8. While holding down the mouse button, drag the Horizontal Line widget, and place it on the wireframe at (35, 550), and then change w: to 265.

  9. While holding down the mouse button, drag the Label widget and place it on the wireframe at (35,600), and type 1. The first question goes here. Change w: to 300.

  10. With the Label widget selected, in the Widget Interactions and Notes pane in the Shape Name field, type QuestionA1.

  11. Perform the following step to create Question and Answer Labels 2 to 12.

    1. Repeat steps 9 and 10, changing the steps each time using the following information:

      Coordinates

      Label Text

      Shape Name

      (35,750)

      2. The second question goes here.

      QuestionA2

      (35,900)

      3. The third question goes here.

      QuestionA3

      (35,1050)

      4. The fourth question goes here

      QuestionA4

      (35,1200)

      5. The fifth question goes here.

      QuestionA5

      (35,1350)

      6. The sixth question goes here.

      QuestionA6

      (35,1500)

      7. The seventh question goes here.

      QuestionA7

      (35,1650)

      8. The eighth question goes here.

      QuestionA8

      (35,1800)

      9. The ninth question goes here.

      QuestionA9

      (25,1950)

      10. The tenth question goes here.

      QuestionA10

      (25,2100)

      11. The eleventh question goes here.

      QuestionA11

      (25,2250)

      12. The twelfth question goes here.

      QuestionA12

  12. While holding down the mouse button, drag the Label widget, place it on the wireframe at (55,630), and then type The answer goes here. There could be many lines of text here. Change w: to 195.

  13. With the Label widget selected, in the Widget Interactions and Notes pane in the Shape Name field, type Answer1.

  14. Perform the following step to create Answer Labels 2 to 12.

    1. Repeat steps 12 and 13 using the same answer label text in step 11. Change the steps each time with the following information:

      Coordinates

      Shape Name

      (55,780)

      Answer2

      (55,930)

      Answer3

      (55,1080)

      Answer4

      (55,1230)

      Answer5

      (55,1380)

      Answer6

      (55,1530)

      Answer7

      (55,1680)

      Answer8

      (55,1830)

      Answer9

      (55,1980)

      Answer10

      (55,2130)

      Answer11

      (55,2280)

      Answer12

  15. While holding down the mouse button, drag the Label widget, place it on the wireframe at (55,680), and type Back to Top.

  16. With the Label widget selected, in the Widget Interactions and Notes pane in the Shape Name field, type BackToTop1.

  17. Perform the following step to create Back to Top Label widgets 2 to 12.

    1. Repeat steps 15 and 16 using the same answer label text in step 15. Change the steps each time with the following information:

      Coordinates

      Shape Name

      (55,830)

      BackToTop2

      (55,980)

      BackToTop3

      (55,1130)

      BackToTop4

      (55,1280)

      BackToTop5

      (55,1430)

      BackToTop6

      (55,1580)

      BackToTop7

      (55,1730)

      BackToTop8

      (55,1880)

      BackToTop9

      (55,2030)

      BackToTop10

      (55,2180)

      BackToTop11

      (55,2330)

      BackToTop12

  18. Click on the Label widget named Question1 at (35,60). With the Label widget selected, perform the following steps:

    1. In the Widget Interactions and Notes pane, click on the Interactions tab, and double-click on the OnClick interaction.

    2. In the Case Editor popup, in Case description, type Question1Clicked.

    3. In Click to add actions, click on Scroll to Widget (Anchor Link).

    4. In Organize actions, you will see the interaction description update to Scroll to Widget.

    5. In Configure actions, under Select widget, scroll to QuestionA1 (Shape), and click on the checkbox next to QuestionA1 (Shape).

      Note

      The box must be checked for the step to work properly.

    6. Click on the radio button next to Scroll vertically only.

    7. Click on the Animate dropdown, mouse over bounce, and then click to select.

    8. You will see the interaction description under Organize actions update to read Scroll to FAQ Top (y only) bounce 500 ms.

    9. Click on OK.

  19. Click on the Label widget named BackToTop1 at (55,680). With the Label widget selected, perform the following steps:

    1. In the Widget Interactions and Notes pane, click on the Interactions tab, and double-click on the OnClick interaction.

    2. In the Case Editor popup, in Case description, type BackToTopClicked.

    3. In Click to add actions, click on Scroll to Widget (Anchor Link).

    4. In Organize actions, you will see the interaction description update to Scroll to Widget.

    5. In Configure actions under Select widget, click on the checkbox next to FAQTop (Shape).

    6. Click on the radio button next to Scroll vertically only.

    7. Click on the Animate dropdown, mouse over bounce, and click on it to select it.

    8. You will see the interaction description under Organize actions update to read Scroll to FAQ Top (y only) bounce 500 ms.

    9. Click on OK.

  20. You will now finish creating scroll to interactions for Questions 2 to 12 and the associated Back To Top labels. Perform the following step:

    1. Repeat steps 18 and 19. In the table that follows, use Coordinates and Question Name (columns 1 and 2) to change step 18. Use Coordinates and BackToTop Name (columns 3 and 4) to change step 19. Change the steps each time with the following information:

      Coordinates

      Question Name

      Coordinates

      BackToTop Name

      (35,750)

      QuestionA2

      (55,780)

      BackToTop2

      (35,140)

      QuestionA3

      (55,930)

      BackToTop3

      (35,180)

      QuestionA4

      (55,1080)

      BackToTop4

      (35,220)

      QuestionA5

      (55,1230)

      BackToTop5

      (35,260)

      QuestionA6

      (55,1380)

      BackToTop6

      (35,300)

      QuestionA7

      (55,1530)

      BackToTop7

      (35,340)

      QuestionA8

      (55,1680)

      BackToTop8

      (35,380)

      QuestionA9

      (55,1830)

      BackToTop9

      (35,420)

      QuestionA10

      (55,1980)

      BackToTop10

      (35,460)

      QuestionA11

      (55,2130)

      BackToTop11

      (35,500)

      QuestionA12

      (55,2280)

      BackToTop12

  21. You can now choose to preview or save a copy of the prototype. To preview the prototype, click the preview button in the toolbar. To save a copy of the prototype, click on the Publish button in the toolbar, and select Generate HTML Files…. You can also generate the prototype by going to the main menu, selecting Publish, and clicking on Generate HTML Files….

How it works...

For this recipe, you used Label widgets to create Scroll to Widget (Anchor Link) animation. The Label widgets became anchors for the browser to scroll to.

Label widgets were also used as clickable regions. For these Label widgets, you used the Widget Interactions and Notes pane to create an OnClick interaction. Using the Case Editor, you defined a Scroll to Widget (Anchor Link) action with animation.

 

Validating user input


A common interaction with web forms is to process user input and display a confirmation message. This can be accomplished in Axure using a Dynamic Panel, Text Field and Button widget.

Getting ready

In this recipe, you will validate user input and set the current state of a Dynamic Panel to display a message to the user. You will use a Dynamic Panel, Text Field, and Button widget to create a user input form.

How to do it...

In this recipe, you will set the state of a Dynamic Panel based on user interaction with a Button Shape widget.

  1. Start Axure and under Create New select RP File.

  2. While holding down the mouse button, drag the Dynamic Panel widget, and place it on the Home wireframe at (0,0).

  3. With the Dynamic Panel selected, perform the following steps:

    1. In the Widget Interactions and Notes pane, click on the Dynamic Panel Name text field, and then type Panel1.

    2. In the Widget Manager, double-click on the Panel1 (Dynamic Panel) icon to open the Dynamic Panel State Manager.

    3. In the Dynamic Panel State Manager popup, click on the green + sign and type 1 to name the new state.

    4. In the Dynamic Panel State Manager popup, click on the green + sign and type 2 to name the new state.

    5. In the Dynamic Panel State Manager popup, click on the green + sign and type 3 to name the new state.

    6. In the Dynamic Panel State Manager popup, click on the green + sign and type ErrorState to name the new state.

    7. Click on OK.

  4. With the Dynamic Panel selected, perform the following steps:

    1. In the Widget Manager double-click on the state labeled 1 to select it.

    2. While holding down the mouse button, drag the Label widget, place it on the wireframe at (16, 26), and type You Entered 1!.

    3. With the Label widget selected, in the Widget Interactions and Notes pane in the Shape Name field, type TextPanel1.

    4. In the Widget Interactions and Notes pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 16 by clicking the Font size dropdown, mouse over 16, and click on it to select it.

    5. In the Widget Manager, double-click on the state labeled 2 to select it.

    6. While holding down the mouse button, drag the Label widget, place it on the wireframe at (16, 26) and then type You Entered 2!.

    7. With the Label widget selected, in the Widget Interactions and Notes pane in the Shape Name field, type Label2.

    8. In the Widget Interactions and Notes pane, click on the Formatting tab, and increase the Font size to 20.

    9. In the Widget Manager double-click on the state labeled 3 to select it .

    10. While holding down the mouse button, drag the Label widget, place it on the wireframe at (16, 26), and type You Entered 3!.

    11. With the Label widget selected, in the Widget Interactions and Notes pane in the Shape Name field, type Label3.

    12. In the Widget Interactions and Notes pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 16 by clicking on the Font size dropdown, mouse over 16, and click on it to select it.

  5. With the Dynamic Panel selected, perform the following steps:

    1. In the Widget Manager double-click on the state labeled ErrorState to select.

    2. While holding down the mouse button, drag the Label widget, place it on the wireframe at (16, 26), and then type You did not enter 1, 2 or 3 !.

    3. With the Label widget selected, in the Widget Interactions and Notes pane in the Shape Name field, type LabelErrorState.

    4. In the Widget Interactions and Notes pane, click on the Style tab, and then scroll to the Font section. Increase the font size to 16 by clicking the Font size dropdown, mouse over 16, and click on it to select it.

  6. Double-click on the Home page in Sitemap, and perform the following steps:

    1. While holding down the mouse button, drag the Label widget, place it on the wireframe at (20, 72), and then type Enter 1, 2 or 3.

    2. With the Label widget selected, in the Widget Interactions and Notes pane in the Label field, type UserPromptLabel.

    3. While holding down the mouse button, drag the Text Field widget, and place it on the wireframe at (20,99).

    4. With the Text Field widget selected, in the Widget Interactions and Notes pane in the Text Field Name field, type UserTextField.

    5. While holding down the mouse button, drag the Button Shape widget, and place it on the wireframe at (20,129).

    6. In the Widget Interactions and Notes pane, click on the Shape Name text field, and type SubmitButton.

  7. With the Button Shape widget selected, perform the following steps:

    1. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….

    2. In the Case Editor (OnClick) pop up, in Case description rename the case description UserEntered1.

    3. Click on Add Condition.

    4. In the Condition Builder pop up from the drop-down menus, select text on widget, UserTextField (Text Field), equals, and value. Enter 1 in the Text Field.

    5. In the Description Label, you should see the condition if text on UserTextField equals "1", as shown in the following screenshot.

    6. Click on OK.

  8. To continue defining the case you started in Step 7, perform the following steps in Case Editor:

    1. In Click to add actions in the Dynamic Panel dropdown, click on Set Panel State.

    2. In Organize actions, you will see the interaction description update to Set Panel to State.

    3. In Configure actions under Select the panels to set the state, click on the checkbox next to Panel1 (Dynamic Panel). You will see the text next to the checkbox update to read Set Panel1 (Dynamic Panel) state to State1.

    4. Click on the Select the state dropdown, and mouse over the state labeled 1. Click on it to select it.

    5. You will see the interaction description under Organize actions update to read Set Panel1 state to 1.

    6. Click on OK.

  9. With the Button Shape widget selected, perform the following steps:

    1. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….

    2. In the Case Editor (OnClick) pop up, in Case description rename the case description UserEntered2.

    3. Click on Add Condition.

    4. In the Condition Builder pop up from the drop-down menus, select text on widget, UserTextField (Text Field), equals, and value. Enter 2 in the Text Field.

    5. In the Description Label, you should see the condition if text on UserTextField equals "2".

    6. In Click to add actions in the Dynamic Panels dropdown, click on Set Panel State.

    7. In Organize actions, you will see the interaction description update to Set Panel to State.

    8. In Configure actions under Select the panels to set the state, click on the checkbox next to Panel1 (Dynamic Panel). You will see the text next to the checkbox update to read Set Panel1 (Dynamic Panel) state to State1.

    9. Click on the Select the state dropdown and mouse over the state labeled 2. Click to select.

    10. You will see the interaction description under Organize actions update to read Set Panel1 state to 2.

    11. Click on OK.

  10. With the Button Shape widget selected, perform the following steps:

    1. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….

    2. In the Case Editor popup, in Case description, rename the case description UserEntered3.

    3. Click on Add Condition.

    4. In the Condition Builder pop up from the drop-down menus, select text on widget, UserTextField (TextField), equals, and value. Enter 3 in the Text Field.

    5. In the Description Label, you should see the condition if text on UserTextField equals "3".

    6. In Click to add actions in the Dynamic Panel dropdown, click on Set Panel State.

    7. In Organize actions, you will see the interaction description update to Set Panel State.

    8. In Configure actions under Select the panels to set the state, click on the checkbox next to Panel1 (Dynamic Panel). You will see the text next to the checkbox update to read Set Panel1 (Dynamic Panel) state to State1.

    9. Click on the Select the state dropdown, and mouse over the state labeled 3. Click to select.

    10. You will see the interaction description under Organize actions update to read Set Panel1 state to 3.

    11. Click on OK.

  11. With the Button Shape widget selected, perform the following steps:

    1. In the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Add Case….

    2. In the Case Editor popup, in Case description, rename the case description to UserError.

    3. In Click to add actions in the Dynamic Panel dropdown, left-click on Set Panel State.

    4. In Organize actions you will see the interaction description update to Set Panel to State.

    5. In Configure actions under Select the panels to set the state, click on the checkbox next to Panel1 (Dynamic Panel). You will see the text next to the checkbox update to read Set Panel1 (Dynamic Panel) state to State1.

    6. Click on the Select the state dropdown, and mouse over the state labeled ErrorState. Click to select.

    7. You will see the interaction description under Organize actions update to read Set Panel1 state to ErrorState.

    8. Click on OK.

  12. You can now choose to preview or save a copy of the prototype. To preview the prototype, click on the preview button in the toolbar. To save a copy of the prototype, click on the Publish button in the toolbar, and select Generate HTML Files…. You can also generate the prototype by going to the main menu, selecting Publish , and clicking on Generate HTML Files….

How it works...

For this recipe, you used a Dynamic Panel, a Text Field, a Button Shape, and several Text widgets. The Text Field widget provides the user an area to input a value. You used the Button Shape widget to control the states of the Dynamic Panel based on the value entered into the Text Field widget.

For the Button Shape widget, you used the Widget Interactions and Notes pane to create OnClick interactions. Using Case Editor, you defined conditions to set a Set Panel state(s) to State(s) action depending on which values were entered in the Text Field widget. You also provided a case that would set the Dynamic Panel to an ErrorState if no defined conditions were met.

 

Adding an enabled submit button to form fields


As you build your prototypes, you often will want to add buttons and form fields. This recipe will show you how to quickly build a simple form with an enabled Submit button.

How to do it...

In this recipe, you will build a simple form with a pair of labels with text fields and a Button widget.

  1. Start Axure and under Create New select RP File.

  2. While holding down the mouse button, drag the Label widget, place it on the wireframe at coordinates (15,37), and then type Name.

  3. In the Widget Interactions and Notes pane, click on the Shape Name text field, and type LabelName.

  4. While holding down the mouse button, drag the Text Field widget and place on the wireframe at (74,32).

  5. In the Widget Interactions and Notes pane, click on the Text Field Name text field, and type TextFieldName.

  6. While holding down the mouse button, drag the Label widget, place on the wireframe at coordinates (15,91), and then type Email.

  7. In the Widget Interactions and Notes pane, click on the Shape Name text field, and type TextPanelEmail.

  8. While holding down the mouse button, drag the Text Field widget, and place it on the wireframe at (74,86).

  9. In the Widget Interactions and Notes pane, click on the Text Field Name text field, and type TextFieldEmail.

  10. While holding down the left mouse button, drag the Button Shape widget, place it on the wireframe, and then type Submit.

  11. In the Widget Interactions and Notes pane, click on the Shape Name text field, and type SubmitButton.

  12. Right-click on the TextFieldEmail text field, click on Assign Submit Button in the pop-up menu.

  13. Click on the checkbox next to SubmitButton (Shape).

  14. Click on the Button Shape widget to select, in the Widget Interactions and Notes pane, click on the Interactions tab, and then click on Create Link….

  15. In the Sitemap pop up, click on Page 1.

  16. Double-click on Page 1 in the Sitemap.

  17. While holding down the mouse button, drag the Label widget, place it on the wireframe, and type Thank You for Your Comments!.

  18. You can now choose to preview or save a copy of the prototype. To preview the prototype, click on the preview button in the toolbar. To save a copy of the prototype, click on the Publish button in the toolbar, and select Generate HTML Files…. You can also generate the prototype by going to the main menu, selecting Publish, and clicking on Generate HTML Files….

How it works...

For this recipe, you used the Label, Text Field, and Button widgets to create an enabled submit button. You enabled the submit button by enabling the OnClick interaction to open in your current window the page that contained our message to the user. While having the submit button selected, you used Create Link… in the Widget Interactions and Notes pane to complete the association.

There's more...

At times you may find that your Text Field widget is not responding in your prototype when a user left-clicks on the Text Field. This can be caused by other widgets overlapping the Text Field widget. For this recipe, make sure that the Label widget does not overlap the Text Field widget.

 

Sending form data to Salesforce


Salesforce is one of the most popular cloud-based Customer Relationship Management solutions available today. In this recipe, you will enable an Axure prototype to submit form data to Salesforce.

Getting ready

To step through this recipe, you will need access to Salesforce. If you do not have a Salesforce account, you can sign up for a free, 30-day trial by visiting https://www.salesforce.com/form/signup/freetrial-lb.jsp.

How to do it...

In this recipe, you will use an Inline Frame widget, and an external HTML to create a form that will populate Salesforce when submitted.

  1. Login to Salesforce.

  2. Click on Setup as shown in the following screenshot:

  3. On the left-hand side in the Build pane, navigate to Customize | Leads | Web-to-Lead, as shown in the following screenshot:

  4. Click on Edit to modify the Web-to-Lead Settings if desired.

  5. Click on Create Web-to-Lead Form.

  6. You can now add or remove additional fields from the form if you want by clicking either on the Add button or the Remove button. The order of the fields can be changed by clicking on the selected field and clicking on the up or down buttons.

  7. Enter a Return URL. This is the page that will be displayed in the Inline Frame widget when the user has completed submitting the form. In our case you will create a basic "Thank You" HTML page and save it to a web server. The page will look like the following screenshot:

  8. Click on Generate.

  9. Copy and paste the sample HTML, and save to a new HTML file in your Axure prototype directory. The following is a sample HTML output from the Web-to-Lead Form generator:

    <!--  ----------------------------------------------------------------------  -->
    <!--  NOTE: Please add the following <META> element to your page <HEAD>.      -->
    <!--  If necessary, please modify the charset parameter to specify the        -->
    <!--  character set of your HTML page.  -->
    <!--  ----------------------------------------------------------------------  -->
    
    <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
    
    <!--  ----------------------------------------------------------------------  -->
    <!--  NOTE: Please add the following <FORM> element to your page.             -->
    <!--  ----------------------------------------------------------------------  -->
    
    <form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
    
    <input type=hidden name="oid" value="00Di0000000YVW0">
    <input type=hidden name="retURL" value="http://www.axuredesign.com/thank_you.html">
    
    <!--  ----------------------------------------------------------------------  -->
    <!--  NOTE: These fields are optional debugging elements. Please uncomment    -->
    <!--  these lines if you wish to test in debug mode.  -->
    <!--  <input type="hidden" name="debug" value=1>  -->
    <!--  <input type="hidden" name="debugEmail"  -->
    <!--  value="[email protected]">  -->
    <!--  ----------------------------------------------------------------------  -->
    
    <label for="first_name">First Name</label><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
    <label for="last_name">Last Name</label><input  id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
    
    <label for="email">Email</label><input  id="email" maxlength="80" name="email" size="20" type="text" /><br>
    
    <label for="company">Company</label><input  id="company" maxlength="40" name="company" size="20" type="text" /><br>
    
    <label for="city">City</label><input  id="city" maxlength="40" name="city" size="20" type="text" /><br>
    
    <label for="state">State/Province</label><input  id="state" maxlength="20" name="state" size="20" type="text" /><br>
    
    <input type="submit" name="submit">
    
    </form>
  10. To enable debug, uncomment either line of code just below the comment: NOTE: These fields are optional debugging elements.

  11. Start Axure and under Create New select RP File.

  12. While holding down the mouse button, drag the Inline Frame widget, and place it at coordinates (0,0) on the wireframe.

  13. With the Inline Frame widget selected, to the top-right of the wireframe, you will see two fields marked w: and h:. These are for the width and height of the Inline Frame widget. Enter 800 in the width field and 500 in the height field.

  14. Double-click on the Inline Frame widget on the wireframe.

  15. In the Link Properties pop up, click on the radio button next to Link to an external URL or file.

  16. Click on the Hyperlink field, and enter the filename of your HTML document created in step 10.

  17. Right-click on the Inline Frame widget and click on Toggle Border.

  18. Right-click on the Inline Frame widget, mouse over Scrollbars, and then click on Never Show Scrollbars.

  19. You can now choose to preview or save a copy of the prototype. To preview the prototype, click on the preview button in the toolbar. To save a copy of the prototype, click on the Publish button in the toolbar, and select Generate HTML Files…. You can also generate the prototype by going to the main menu, selecting Publish, and clicking on Generate HTML Files….

  20. Click on OK.

  21. Enter all of the field data and click on submit.

  22. To verify that the data was entered into Salesforce, log in to your Salesforce account.

  23. Click on Leads.

  24. On the Leads Home page, Go!. The Go! button can be found next to View: dropdown (for example, in the screenshot, the View: dropdown contains the value Today's Leads).

  25. You will see all of the leads generated from your prototype.

How it works...

In this recipe, you used the Inline Frame widget with the Default Target set as an external HTML file that contains the HTML code for your Salesforce form. You also uploaded a thank_you HTML file to a web server. When the prototype is run, the Inline Frame widget displays the external HTML file that contains our Salesforce form. After the user clicks on the Submit button, the form data is passed to Salesforce.

About the Author

  • John Henry Krahenbuhl

    John Henry Krahenbuhl has over 20 years of experience in architecting practical, cost-effective, and innovative solutions. Being a creative thinker and having an entrepreneurial spirit has enabled him to perform in the role of lead or co-inventor on at least seven granted patents as well as numerous pending utility patent applications. He is a multifaceted and collaborative management professional, who is highly skilled at managing products through their entire life cycle from design to obsolescence, including specification and use case definitions, schematic and PCB layouts, production software implementation, and hardware implementation.

    He's a passionate, resourceful leader who demands and delivers excellence in design and user experience. To his credit, John is also the author of Axure RP Prototyping Cookbook as well as Learning Axure RP Interactive Prototypes, both published by Packt Publishing.

    Browse publications by this author

Latest Reviews

(1 reviews total)
Der Kauf war unproblematisch. Vom Inhalt des Buches hatte ich mehr erwartet. Ich habe es gekauft, weil mich der angebotene Inhalt interessierte, auch wenn das Buch schon älter ist. Leider folgen die Kochrezepte immer dem gleichen Muster. Passable Lösungsansätze für die Anbindung von Datenbanken und Ajax habe ich leider nicht gefunden.
Axure RP Prototyping Cookbook
Unlock this book and the full library for FREE
Start free trial