New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


Previously, Ash dove into and explained the inner wiring between the Persona Bar and the React JS sample application. In this blog post, we’re going to take a look at how to call an existing web api and display the information returned.

Useful Blogs

Before we proceed, you may want to reference these blogs:

1.    DNN 9: Persona Bar Architecture

2.    DNN 9: Extending the Persona Bar

3.    DNN 9: Adding a ReactJS App to Persona Bar

4.    DNN 9: Diving in a ReactJS Persona Bar Extension



Note: In this example, we are using the already available getUsers API in the persona bar.


First, let’s go back to the very beginning of our app. Here, you’ll see boilerplate code required to connect our Redux state to React.

1.) Store – this generates our store from the reducers we specify, and also applies any middlewares that are defined.


2.) Provider – this is provided by React-Redux to allow all containers in our React application to access the store’s state.


To get a better understanding of the principles of Redux, refer to


Once our app has been setup, we can now start defining the necessary elements to create our react-redux workflow.



Let’s break this down.


1.)  User Actions – these contain actions that call a service and dispatches events after the call has gone through.

a.    User Action breakdown


2.)  Display Components – these components take the data and display them accordingly, in this case, a table layout using DNN-GRID-CELL component.

a.    Grid Cell Component – this component takes a column size, which turns it into a percentage. This behaves much like the bootstrap grid, floating elements to the left and using percentages as width to allow responsiveness.



3.)  User Table – this table uses some of the display components such as Header Row and Detail Row in order to build a table.

4.)  Action Types – these are variables used to define actions that a dispatcher listens to (see figure 1.a.)


5.)  Localization – we have built in localization to all persona bar modules in the utility library. In order to grab a resx key from a module, we can use the getResx function.

In this case, our resx file name is HelloWorld (matches module name), and we can use the getResx method to call for any keys.

Example: Localization.get calls the getResx method, looking for the key “Name.Header”.
Note: If the key ends with .Text, there is no need to add .Text to the key name. (Localization.get("Name") will look for Name.Text as the key)



6.)  User Reducer – this reducer contains the list of users that are returned from the API. It’s job is to provide an initial state (list = empty array), and listen to actions (RETRIEVED_USERS) and update their contents accordingly.



Note: When using redux, it is generally a good practice to avoid mutations, hence we should avoid using methods such as push, etc. In this example, we are also using ES 6’s rest/object spread notation in order to return a copy of the state.


7.)  User Service – this service uses the service framework that is provided in the utility library in order to make API calls. The service framework comes preloaded with the proper tools to authenticate API calls.


GetUsers search parameters:

1.) searchText: text to search for in users [""].

2.) filter: filter by type of user [0 - shows all]

3.) pageIndex: pagination index [0 - gets first page]
4.) pageSize: number of users to get [10]

5.) sortColumn: column to sort by ["" - default]

6.) sortAscending: descending or ascending order [false]


With all of the components in place, our application now has the full workflow in order to retrieve and display the list of users.




Scott Wilkinson
When I install my custom persona bar extension, it can't find the js, html, and css. Devtools says it is trying to look int he Dnn.PersonaBar folder for the html and the Dnn.PersonaBar/scripts for the js. What do I need to do to make it look in the Dnn.PersonaBar/Modules/[ExtensionName] folder?
Scott Wilkinson Friday, December 30, 2016 9:59 PM (link)
Ash Prasad
@Scott - you want to make sure that the files are deployed under the right folder. See sample manifest entry here:
Ash Prasad Saturday, December 31, 2016 11:33 AM (link)
Scott Wilkinson
Ash, thanks! My problem was I was working with an older build. I wiped it out and started with a new install from 9.00 and I see the change in structure and have it minimally working.
Scott Wilkinson Saturday, December 31, 2016 12:01 PM (link)
Scott Wilkinson
Ash, thanks! My problem was I was working with an older build. I wiped it out and started with a new install from 9.00 and I see the change in structure and have it minimally working.
Scott Wilkinson Saturday, December 31, 2016 12:01 PM (link)

Comment Form

Only registered users may post comments.


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Daniels (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out