Tutorial #1: Address Book app

Beta Program
1

Tutorial #1: Address Book app

Here’s a video that accompanies the below tutorial:

For this exercise we’ll use the app wizard to get started more quickly. The wizard will ask for information about the type of data our app will use, and then will automagically create a UI and backend data structure for us. Everything you do in the wizard can be modified later so don’t worry about getting it 100% right. The wizard will create a functional app (Web and mobile), but we’ll want to spend some time customizing it. When you finish you can modify and add on to your app, start a new app with the wizard, or try creating one from scratch.

Get Started

  1. Login
  2. Navigate to the Developer view
  3. Select the Create App menu and the Wizard App menu item

App Wizard

  1. The wizard starts with Step 2: data models. You can see options to select from pre-defined templates, or import models to share data with existing apps. For this exercise we’ll define our own with the Create Custom Models option.
  2. Create a data model called Person & add attributes of Name, Email, Phone, etc.
  3. Create a data model called Company & add attributes of Name, Phone, Address, etc.
  4. Create a data model called Region & add an attribute of Name.
  5. Proceed to the next Wizard step to define Relationships, i.e., how the data models you just defined are related to each other. Let’s define two relationships. Each relationship works in both directions.
  6. Person -> Company (the value on the right). Since a person should really only work for one company at a time, we can say that a Person can have “One," or “Zero or One” Company. Which one should we choose? If we choose “One,” then the resulting app UI will require a linked Company when we first create a Person. This can be problematic if the Company hasn’t been entered yet. For this reason, it’s probably better to select “Zero or One.” That way we can enter a Person without a Company, and later enter the Company and link them. Both options are correct, but result in different user experiences.
  7. Person <- Company (the value on the left). Since a company typically has many employees, we can say that a Company can have “Zero to Many” Person.
  8. Company -> Region (the value on the right). Companies can sometimes have many offices/locations but in this case we’ll say that a company has one address (consider it the HQ/main location) and therefore “One,” or “Zero to One” Region. Which one should we choose? Since we chose “Zero or One” earlier, let’s choose “One” this time.
  9. Company <- Region (the value on the left). Since a region is a boundary on a map, it’s not exclusive. A Region can have “Zero to Many” Company.
  10. Proceed to the next Wizard step to define Roles. The Appivo platform allows for detailed role-based access control. You can create roles with different access for each data model, based on the CRUD system (Create, Read, Update, Delete).
  11. By default an Admin role is defined and the builder (that’s you) is automatically assigned that role. If you modify the Admin role or add new roles, you’ll be assigned the role with the most privileges.
  12. Try creating a Read-Only role.
  13. Proceed to the next Wizard step to confirm some UI options. Leave the defaults selected and proceed to the next Wizard step.
  14. The last Wizard step lets you enter a name and description for your app. Choose anything you like and continue, but please avoid using special characters like Ö or Æ.
  15. We should now see a success message. Clicking Proceed will take us to our app in the Builder.

App Builder 1

  1. The app builder primarily consists of three working panes. The left-hand pane is the navigation pane, to select different parts of your app to work on. The middle pane is the main work area. It may be a dashboard but is often the canvas on which you’ll paint your app masterpiece. The right-hand pane is your palette, containing different widgets that you can drag onto your app.
  2. First, locate and click the Save button (because that’s always a good idea).
  3. Browse around the different aspects of the Builder to get a feel for it. We’ll cover some things, like Actions and Queries later on. Make sure you look at the Interfaces section to see the Web and mobile UIs that were generated by the wizard.

Run your app.

  1. Below the navigation pane you’ll see a right arrow/triangle play button. Click it to launch your app in a new tab.
  2. Congratulations! Here’s your Web app.
  3. Browse around using the default home page links and the menu items at the top.
  4. Let’s enter some data.
  5. Start by adding some regions. Some standard regions are: Americas, EMEA (Emerging Markets, Europe & Africa) & APJC (Asia-Pacific, Japan & China), but you can enter US-West, US-Central, US-East, or anything else.
  6. Now add a company. Notice that there’s a drop-down menu containing the regions you just entered. This menu is here because the wizard understood the relationship we created between Company and Region.
  7. Now add a person.
  8. Add as much data as you like!
  9. You can also view your app on your phone, or tell Chrome to display the mobile view.
  10. Chrome: Enter the console mode (instructions above in category intro) and click the button that looks like a mobile phone. You may need to edit the URL to say …/apps/#// and reload the page.
  11. Phone: Enter the base app URL into your phone’s browser (eg, http://beta.appivo.com:8080/apps/#/). You’ll need to authenticate. You have the option to add the app to your home screen. If you do so, you’ll likely need to authenticate one more time.

App Builder 2

  1. In this section we’ll switch back to the tab with the Builder and start modifying our app.
  2. Navigate to the Desktop interface and look at one of the list views. You should see the data that you entered earlier, which is great as it provides some context.
  3. Now go to back to the Desktop interface so that you see the list of the Desktop views in the center panel. At the top of the center panel are options to modify the Menu and Theme.
  4. Click Theme.
  5. Select Custom from the Select theme menu, then play with the below options for fonts, colors and backgrounds. If you choose a darker background then you might want to change the font color to something lighter.
  6. Click Save.
  7. Let’s also modify the List Company view. Navigate there now.
  8. Double-click the text on the canvas and change it from “List Company” to “Companies”.
  9. Double-click the data grid (the list of companies) and take a minute to review all the options.
  10. On the first tab, enable: Sorting, Resizable columns, & Auto-height. Feel free to play with the other options.
  11. On the Columns tab, you’ll see column options corresponding to each attribute of the Company data model plus a few others. Some of the other columns include default time stamps, system IDs and related data models.
  12. Select Region and then click OK.
  13. Here it might be a good idea to move the New Company button, and to resize the data grid by grabbing a corner and dragging it.
  14. Now right-click or control-click on the data grid, and select Style.
  15. A new style editor is now in the right-hand pane. Scroll to the bottom and switch on Advanced CSS.
  16. Here you can specify custom CSS for the data grid itself. Copy and paste this: opacity: 0.8;
  17. Save the right-hand pane style editor
  18. Click Save to save the app.
  19. Click the Play button below the navigation pane to see your changes in action.
  20. Go back to the Builder tab and adjust the other views!

App Builder 3

  1. In this section we’ll use the Builder to modify the mobile interface.
  2. Navigate to the Mobile interface and look at the Application Home view. You should see some default icons.
  3. Right-click the icons and scroll through the list to select ones that you like better.
  4. You can also right-click the text labels to change them.
  5. Look for other images or text that you want to change.
  6. You can also add some icons and images for the mobile app.
  7. In the Navigation Pane, go to Settings > General > Icons.
  8. Add an image to the Application Icon.
  9. This icon will appear when you add the app to your mobile home screen. If you’ve already done that, you may need to delete the app and re-add it by typing the app URL into your mobile web browser.