How to use the text and shapes widgets in Connect App Builder.
The text and shape components in connect can be used standalone data connected or combined with other widgets to meet your style needs.
In Connect App Builder, click on Text in the left menu and a detail menu will appear. You will see the option to choose a type of text. Click on your desired text type and a textbox will appear in the App Builder canvas.
Now that you have a text box on the canvas you can edit the text. Click on the text inside the text box to edit. Any style changes from the right hand panel will affect the all text contained in the text box.
Text box size, position and rotation can be manipulated manually using your mouse, or using the properties panel that appears on the right
You can set transparency of the text by either entering an opacity value, clicking on the arrows that appear. Alternatively opacity can be driven by a single point data connection. Follow this link to learn more about connecting to a single data point.
Change the font by clicking on the current font name, then choose from a drop down list of available fonts.
Click on Add a font if you want something other than what is on the drop down menu list.
Enter in the name of a Google Font and click Search. You can browse a selection of google fonts at fonts.google.com.
Adjust text size by clicking on the current text size listed to the right of the current font. You can either choose from a dropdown list of preset sizes or enter a value in the field.
Add a text style like Regular, Bold or Oblique by clicking on the drop down for text style and choosing from the menu. The style chosen will apply to the entire text box.
Change the text color by clicking on the color swatch to the right of the text style menu.
The color picker will appear. Choose the color for the text from the swatch library, the color slider or by hex values. The color chosen will apply to the entire text box.
Alternatively color can be driven by an external data source, click on the lightning bolt icon next to the color swatch to connect to a single data point. Follow this link to learn more about connecting to a single data point.
Adjust the Letter Spacing and Line Height by entering a value or clicking on the arrows that appear next to the letter spacing icon.
Transform the case of your text to Capitalized, Uppercase or Lowercase by choosing the option from the Transform case buttons.
Change the alignment by clicking on the corresponding Alignment thumbnail.
Click on data in the left hand panel to add in text from your data source.
Choose your data source from the list or connect to a new data source, learn more about connecting to a new data source in creating a new app from scratch.
Click and drag on the text item you want to add to the app canvas.
When adding any item from data you will see a data modal asking how you want the data record to be presented. In a repeating grid, in a slide or on its own. In a repeating grid or in a slide will present an entire record of data, to show only one value of data connected text.
Click and drag additional items from the data source on the left hand panel, over the existing text box.
Click on the text and type to add in additional non data connected text.
Additionally Some widgets such as graphs handle text from an external data source. Text options may be limited depending on the widget used.
Click on Shapes in the left menu and a detail menu will appear. Click on a shape to add it to the canvas.
All shapes on the canvas can be resized, positioned or rotated manually using your mouse, or using the right hand properties panel.
From the properties menu on the right, click on the swatch for Fill to set the color of a shape.
You will see the color picker appear. Click on a swatch to choose a solid color for the shape.
You can also set the background as a directional gradient or radial gradient by clicking on the gradient toggle buttons below the color swatch library.
Click on the gradient slider below the gradient toggle buttons to select a color point on the gradient. Once selected you can change the color by clicking on a swatch above.
Change the direction of the gradient background by clicking on the rotate gradient option next to the gradient point sliders.
If you prefer not to use the swatch library, you can select a specific color by entering either the hex or RGB values at the bottom of the color picker.
Alternatively you can connect any color property of a shape to a data connection. Click on the lightning bolt next to the Fill swatch to connect to a single data point. Follow this link to learn more about connecting to a single point.
Add a Shadow to the shape by choosing Shadow In the widget properties menu on the right.
Enter a value next to the shadow blur icon or click on the arrows that appear to show or hide the shadow.
Change the X and Y offset of the shadow from the shape to increase or decrease the visibility of the shadow. The farther the value is from 0 the higher the visibility of the shadow.
Add a border to your shape by entering in a Border thickness value in the properties panel on the right. Click on the color swatch to adjust the color of the border.
If you wish for the shape to have a dashed border enter a value next to Border dash. Then you will see new controls for adjusting the gap size between dashes.
Rectangles: When selected rectangles have a corner radius attribute that can be adjusted to round the corners of the shape.
Polygons:The polygon has several additional attributes that can be adjusted to make a wide variety of shapes.
You can adjust the look of a starred polygon by changing the inner radius. This will move in or out the points on the inside of the star.
Toggle off Star Shape to show shapes that have flat sides that do not have an inner radius of points.
Adjust the number of sides by entering the value next to Sides in the right hand properties panel.
Shapes can also act as containers for photos. Follow this link to learn more about Photos in Connect
Not sure how to start? Get inspired Using pre-built Templates
Learn more about Connecting your Data
Support available between 9:00am and 5:00pm (CST-06:00), Monday through Friday
