Basic to intermediate App Maker skills
About 30 minutes
What you’ll build
You’ll build a small part of a project tracking app. The goal is not to have a fully functional app, but also to learn about styling apps. A user of the app can:
- Create new project records and enter data in them
- Edit project records
- Navigate between records
What you’ll learn
This tutorial teaches you how to:
- Style your app in the App Maker editor without using cascading style sheets (CSS). Select an overall stylistic theme and select among built-in App Maker style variants for widgets.
- Style your app by writing CSS language in the Style Editor. Optionally, use external style sheets. CSS provides full control over the appearance of your app.
Preparation
Build a small part of a project tracking app that you will style.
Create your app
- Sign in to the G Suite account provided by your employer or school.
- Open App Maker.
- Create a blank app:
- If App Maker displays the welcome dialog, click Create New App.
- Otherwise, click Menu New Blank Application.
- Rename the app. Delete the default name, Untitled App, and enter Style Your App.
Create a data model
- Hover over Data and click add to add a model.
- Create a Google Cloud SQL data model. Name the data model ProjectData.
Add fields to the data model
- On the tab toolbar for the ProjectData data model, click the Fields tab.
Add these fields to the ProjectData data model:
Field name Field type Project
String Owner
String DueDate
Date
Rename the page for the UI and select a datasource
- Rename NewPage to Projects.
- In the Property Editor, set the datasource property for the Projects page to ProjectData.
Add an edit form and table
- Click Widgets
and drag a Form
onto the page. Select Edit form.
- From Widgets
, drag a Table
onto the page below the edit form. Horizontally align the left edges of the edit form and table.
- Click Close to close Widgets.
Preview your app
Before you style your app, preview it. Your app now uses the default style variants for widgets in the Material theme.
- In the top-right corner, click Preview to run your app in a new browser tab.
- Click Allow to allow your app to use specific information.
Style your app without using CSS
App Maker lets you style your app without writing CSS language. You can:
- Select a theme, a built in set of styles for all widgets in your app
- Select among a set of variants (style variants for each widget type). The default theme, Material, has a large number of built-in variants. For example, for a button, you can choose among styles that have different background colors. For a label, you can choose among different font sizes. All widgets have a default variant.
Select a theme
App Maker has these themes:
- Material—A set of simple but elegant styles, with a choice among multiple style variants for each widget type. You can use the Material theme as is, or you can customize it further.
Plain—A set of very plain styles, with few choices among style variants. If you are skilled with CSS and plan to use CSS to create your own styles for all widgets, then you could use the Plain theme.
Change your app’s theme:
- On the left sidebar, click the Projects page.
- On the tab bar above the Property Editor, select Style Editor .
- From the Theme drop-down, select Plain. Notice that the styles used in the form and table are simpler. For both labels and buttons, there is only one built-in variant.
- In this tutorial, you will use the Material theme. From the Theme drop-down list, select Material.
Select style variants for specific widgets
Select style variants and observe the effects:
- In the bottom-left corner, click Show outlines
to outline widgets. When selecting variants, widgets might disappear, for example, if a white text box is on a white panel. The outlines let you find the widgets.
- Click the Edit Projects form. Make sure the entire form is selected. The blue selection box should surround the entire form. On the Outline tab,
Panel: Form1
should be selected. - In the top-left corner, notice the Variant drop-down list with Paper selected.
- From the Variant drop-down list, select Primary. The entire form becomes blue. Notice that the Edit Project label automatically became white. This automatic change did not change the variant of the label. Notice that the Project, Owner, and Target Date widgets did not change automatically. (You could make those widgets white by selecting the Dark variant for them. Don’t do that now.)
- Click the Edit Projects label.
- From the Variant drop-down list, select DisplayOne. This increases the size of the Edit Projects label.
- Click the Create button. This is the widget to the far right of the Edit Projects label. You can’t see the text, because it is blue on blue. With the button selected, the last item in the breadcrumbs is
Button: Form1CreateButton
. - From the Variant drop-down list, scroll through the variant choices for buttons. Notice that some variants use Material icons. Select the variant IconDark.
- Preview your app.
- Click Undo three times to undo your changes of variants.
Style your app with CSS
Here you learn how to use CSS to style your app. To style your app, you can write CSS rule-sets. Usually when developing web apps, selectors in rule-sets reference HTML elements. In App Maker, selectors reference widgets, or you use styleClasses properties to apply the rule-sets to widgets.
About CSS
CSS consists mostly of language units called rule-sets, which define where to apply styles and which styles to apply.
This is an example of a rule-set:
.app-Projects-Form1CreateButton {
background-color: #B2FF59;
color: #03A9F4;
}
In a rule-set:
- One or more selectors define where to apply the style. In the example above, the selector is
.app-Projects-Form1CreateButton
. This tells App Maker to apply the styles to theForm1CreateButton
button on theProjects
page. - The declarations define the styles to apply. In the example above, declarations set the background color and the color.
Style sheets cascade in three ways:
App Maker evaluates rule-sets from top to bottom, for both external CSS files and the contents of the Style Editor. If more than one selector applies the same declaration to a specific widget, then declarations in the rule-sets that are farther down in a CSS file override the declarations above them.
For example, in these two rule-sets, you first specify that all buttons are light blue, but then you specify that the
Form1CreateButton
button is orange. So theForm1CreateButton button
will be orange. The color of the text on all buttons is a dark gray. That color is not overriden for theForm1CreateButton
button..app-Button { background-color: #A1C2FA; color: #212121; } .app-Projects-Form1CreateButton { background-color: #FFB74D; }
App Maker evaluates external CSS files in the order in which you add them in General Settings.
App Maker evaluates the contents of the Style Editor last, after evaluating external CSS files.
Create a custom style variant
You can create custom style variants for widget types, for example, to provide custom appearances of buttons or panels. After you define a custom variant, you select it from the Variant drop-down list.
The syntax for a class selector for a custom variant is:
.app-widget_type--widget_style
Notice the double hyphen. This is a signal to App Maker that what follows is the name of the variant.
For example:
.app-Button--Orange
To create a custom style variant for a widget type:
On the tab bar above the Property Editor, select Style Editor
to open the Style Editor. This is where you can create a CSS style sheet that styles your app. In some cases, code completion is present while you type. You can also press Ctrl+Space to view code completion.Add an Orange variant for buttons. Copy and paste this code into the Style Editor:
.app-Button--Orange { background-color: #FFB74D; }
On the app, click the Create button.
From the Variant drop-down list, select the variant Orange. The Create button turns orange.
From the Variant drop-down list, select the variant FlatColor.
Tip: As an alternative to creating a custom variant, you can override an existing variant. For example for buttons, add a rule-set with the selector
.app-Button--Icon
and specify a different background color (for example, cyan):.app-Button--Icon { background-color: #4DD0E1; }
All buttons for which you choose the variant Icon will have a cyan background color.
Style a specific widget using a styles property
The styles
property of widgets provides an easy way to apply one or more styles to a specific widget. In the value
of the styles
property, you reference CSS rule-sets by class name. You can define the styles in the Style Editor, in external style sheets, or both.
Add rule-sets for styles in the Style Editor. Give the styles class names that do not style parts of the app directly (that is, do not reference
app-
). For example, add these CSS rule-sets:.Green { background-color: #0F9D58; border-style: double; border-width: 4px; border-color: #000000; border-radius: 7px; } .Border { border: 4px solid #000000; box-shadow: 5px 5px 10px #BDBDBD; margin: 15px; }
Select the widget you want to style. On the edit form, click the Create button.
As the value of the styles property, enter the class names of the styles you want to apply (separated by spaces):
- In the Property Editor
already selected next to the drop-down list icon .
, expand the Display section. You should see value - In the styles property, enter the class names Green and Border.
- In the Property Editor
Use external style sheets
You can use external style sheets to style widgets. As in the Style Editor, external style sheets must contain CSS rule-sets that apply styles to widgets, or that you apply to widgets using the styleClasses properties of widgets. External style sheets with rule-sets that apply styles to HTML elements will not style App Maker widgets.
An external style sheet must be located at a URL that App Maker can access in Google Cloud. You provide the URL in General Settings. For example, you can provide the URL of a CSS file for a Google font:
https://fonts.googleapis.com/css?family=Roboto+Condensed:regular,bold
Place a style sheet at a URL in the Google Cloud
If your CSS file is not already in the Google cloud, App Maker provides an easy way to put it there:
- In a file manager, locate the CSS file.
- In App Maker, click Settings Resources.
- Drag the text file to the Add area.
- Click Copy resource URL .
- Click Settings General settings.
- In CSS URLs, paste the resource URL and click Add CSS.
- For additional CSS files, repeat steps 2 through 6.
Add a reference from your app to a style sheet
To use an external style sheet located at a URL in the Google cloud:
- Obtain the resource URL of the CSS file.
- Click Settings General settings.
- In CSS URLs, paste the resource URL and click Add CSS.
- For additional CSS files, repeat steps 1 through 3.
Next steps
- Learn more about cascading style sheets.
- Take Tutorial 4 and learn about calling scripts.