How Can We Help?

Working with Smart Parts

You are here:
< Back

Smart Parts are intelligent business objects which are shown visually by SageTea App Server and organized using Text-to-software®.

Here are the available Smart Parts for building SageTea Applications:

• Java Script
• Input Field
• Label
• Navigator
• Search Engine
• Spin Button
• Calculation – An API script that works similarly to an Excel spreadsheet formula. The Calculation Smart Part provides an entry point to make an API call into the SageTea Application. The API classes are listed in this help file.
• Table
• Text Area
• Forum
• Attachment
• Check Box
• Image

Smart Parts are an easy way to add functionality to your applications. You can use Smart Parts to add fields for your users to fill out, buttons they can click (that actually do things!), charts they can admire, and a huge variety of other things.
To create a Smart Part, all you need is a field that’s already been created and your imagination.

Turning a field into a Smart Part

Every Element is associated with a requirement in a Use Case. To make an Element, you must first create a Requirement in a Use Case, and then create the associated Element.
The default setting for an element is an Input field. This lets the user type in information such as a name or reference number.

Follow these steps to turn a field into a Smart Part:
1. Create a field from a requirement
2. Covert it into a Smart Part by right-clicking the field and selecting Smart Parts from the list of options.
3. In the Smart Parts window, select and define the Smart Part can be selected and defined.

Creating Smart Parts with Text-to-Software Synonyms

By default, when you’re using Text-to-software, Text-to-Software creates an input Field out of the longest word in each sentence of the document you upload.
But there are also over 100 synonyms that Text-to-Software recognizes and makes into other kinds of fields—Smart Parts, specifically. Here’s a list of the different synonyms that Text-to-Software recognizes. The best way to use this list is to look up the type of Smart Part that you want Text-to-Software to make in order to find the word you should use in the document you’re writing.
For example, let’s say you want Text-to-Software to make an image Smart Part, a field where a user can upload a graphic. You would scroll down to “Image” in this list and see that you can use the word “graphic” to create an image field, so you would use the word “graphic” in your sentence to create an image field.

Here is the list of synonyms you can use to create Smart Parts.

• ACTION BUTTON
• Click

• BAR CHART
• Barchart
• Bar

• CALENDAR
• Calendar

• CHART
• Chart

• CHECK BOX
• Ready
• Send notification email
• Notify
• Cold
• Hot
• On
• Off

• DATE
• Today
• Week
• Deadline
• Due date
• Overdue
• Past
• Before
• Due
• Milestone
• Deliver
• Delivered
• Completed
• Finished
• Finish
• Start
• Year
• Day
• Month
• Century
• Decade
• Date

• EMAIL
• Email

• FILE
• File
• Attachment
• Document
• Agreement
• Insurance
• Record

• FORUM
• Forum
• Discussion
• Thread
• Conversation
• Discourse
• Dialog

• GAUGE
• Gauge
• Dial

• GEO CHART
• Location
• Area
• Place

• GOOGLE MAP
• Map
• Address
• Billing address
• Origin

• IMAGE
• Image
• Picture
• JPEG
• Bitmap
• PNG
• GIF
• Graphic
• Visual

• INPUT FIELD
• Field

• JAVASCRIPT
• Java
• Javascript

• LABEL
• Label

• LINE CHART
• Line

• LIST
• List
• Type
• Label
• Ingredient
• Warning
• Priority
• Priorities
• Assigned
• Assigned to
• Related to
• Source
• Lead source
• Debt to gdp ratio
• Educated
• Diverse
• Tax
• Taxes
• GDP
• GNP
• Create job
• Create
• Innovation
• Job
• Investment
• Environment
• Prosperity
• Economic
• Fiscal target
• Target
• Fiscal
• Deficit
• Value

• LOGO
• Logo

• MAP
• Map

• NAVIGATOR
• Navigate
• Navigator
• Navigation

• PAGE
• Page

• PIE
• Pie

• RADIO
• Radio

• REALTY
• Realty

• RULE
• Rule

• SEARCH ENGINE
• Search
• Detect
• Locate
• Query
• Queries
• Search
• Find

• SECURITY MANAGER
• Secure
• Safe
• Protect
• Confidential
• Security

• DATA COLLECTOR
• Survey

• SPIN BUTTON
• Range
• Temperature
• Maximum
• Minimum
• Height
• Depth
• Pressure
• Frequency
• Acceleration
• Strength
• Power
• Work
• Rating
• Quality
• Speed
• Velocity
• Limit

• TEXT AREA
• Report
• Reported
• Description
• Explanation
• Text
• Result
• Comment
• Note
• Log
• Record
• Plan
• Budget
• Approach
• Opportunity
• Introduction
• Advantage
• Example
• Relationship
• Society
• Proposing
• Recommendation
• Market
• Globalization
• Characterized
• Professional
• Employment
• Municipality
• Municipalities
• Economy
• Business
• Businesses
• Society
• Arrangement
• Recipe

• TIME FIELD
• Minute
• Hour
• Second
• Millisecond
• Microsecond
• Time

Adding Action Buttons

If you want to create a button in your application that performs an action like logging a user out, or opening the online Help, follow this procedure.

TO ADD AN ACTION BUTTON
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select action Button.
4. Click an icon in the list and click the Choose Icon button.
5. Click an action in the list and click the Choose Action button.
6. Click Save.

TO SET ACTION BUTTON OPTIONS
1. Type values (in pixels) in the following boxes:
• Preferred Width
• Preferred Height
2. In the Direction box, choose one of the following:
• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line
To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding an Appointment Calendar to your Application

Adding an appointment calendar to your application could be useful in tracking appointments and in scheduling events.

TO ADD A CALENDAR FIELD
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select Calendar.
4. Click Save.

TO SET CALENDAR OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Bar Charts

FORMATTING VALUES
You will have to format your values in a very specific way to have them appear how you want to (sorry).
Each row of data must be enclosed in square brackets ([]) and separated from the next row with a comma. Example: [Row 1],[Row 2]. Okay?
Within the row, use commas to separate fields. [Row 1, Field 1, Field 2],[Row 2, Field 1, Field 2]
To identify a heading field, you must put your text in single quotes. That’s the ‘s I’ve been using in the example above.

For value (number) fields and text fields that aren’t headings, don’t put them in ‘s. For example [Row 1, 1, 2],[Row 2, 3, 4]
To put it all together, these values…
[‘Year’, ‘Sales’, ‘Expenses’],[‘2004’, 1000, 400],[‘2005’, 1170, 460],[‘2006’, 660, 1120],[‘2007′, 1030, 540]

Will display like this… https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart

TO ADD A BAR CHART
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select barChart.
4. Fill out the following boxes:

• Name
• Label
• Title
• Width
• Height
• Horizontal
• Vertical

5. In the Legend box, click one of the following options to determine where the legend will appear in relation to the chart:
• Right
• Left
• Top
• Bottom
• None

6. In the Tooltip trigger box, click an option to determine how the user will make the tooltip appear:

• Focus—Tooltip will appear when the user hovers their mouse over the chart.
• None—Turns off tooltips.

7. In the Value box, input the values for your chart.

• Enclose the values for each row in square brackets—[].
• Put a comma between each row of square brackets.
• Within the square brackets, separate fields with commas.
• Enclose horizontal and vertical headings in single quotes—’. For example, [‘Year’, ‘Sales’, ‘Expenses’] will create a row of headings. [‘2004’, 1000, 400],[‘2005’, 1170, 460],[‘2006’, 660, 1120],[‘2007’, 1030, 540] will create a column of headings.

8. Click Save.

TO SET BAR CHART OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line to make the field show below the previous item; or
• Horizontal to keep the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Buttons to Save Forms

Sometimes you just need to make a really long form. Say you want to create a survey that has a hundred or two hundred questions in it.
That’s a lot of questions. That’s a lot of data to collect. And it’s a lot of data to lose if anything goes wrong.
Something called a “data collector” will solve this problem. In essence, it’s a save button that will save the data your user has already recorded so that they can go get a coffee without fear.

TO ADD A SAVE BUTTON
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select simpleDataCollector.
4. Click the Set Storage State button.
5. In the Would you like to add support for: New Group as a container now dialog, click Yes.
6. In the Choose a state as the container for: New Group box, click a state, then click OK.
7. Click Save.

TO SET SAVE BUTTON OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding CheckBoxes

This will create a check box that your user can enable or disable. It’s totally different than a radio button. It’s square.

TO ADD A CHECK BOX
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select Check Box Set.
4. Click Save.

TO SET CHECK BOX OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Data Tables

You can add a data table to your user interface. A data table is like a table in Word—a grid you can put data in, organized in rows and columns.

When you set up a table, there are a couple of options you should look at. Name, label, title, width, and height are the standard things.
Paging divides data tables into pages. Only one page will display at any time. To go to the next page, the user will click a button.
For example, if your table has 100 rows and you set the paging size to 20, each page will have 20 rows and five pages.
The row numbers option puts a number at the beginning of the row. Like it sounds, it just numbers the row.

FORMATTING VALUES

You will have to format your values in a very specific way to have them appear how you want to (sorry).
Each row of data (or Wingdings) must be enclosed in square brackets ([]) and separated from the next row with a comma. Example: [‘Row 1’],[‘Row 2’]. Okay?
Within the row, use commas to separate fields. [‘Row 1’, ‘Field 1’, ‘Field 2’],[‘Row 2’, ‘Field 1’, ‘Field 2’]
For a text (string) field, you must put your text in single quotes. That’s the ‘s I’ve been using in the example above.
Value (number) fields are enclosed in curly brackets {}. Inside the curly brackets, identify the value of the field with a v: and identify the field value you want shown with an f:. It works like this: {v:8000, f: ‘$8,000’}. In that case, the application displays ‘$8,000’, but the application uses the value 8000 when sorting fields.
You can also format fields to display either a checkmark or an X. You can see how that would be useful to show yes or no, true or false. All you have to do to display a checkmark or an X is to write true or false. Don’t put them in single quotes, though, or the word true or false will display.
Putting it all together, the following format…
[‘Mike’, {v: 10000, f: ‘$10,000’}, true],[‘Jim’, {v:8000, f: ‘$8,000’}, false],[‘Alice’, {v: 12500, f: ‘$12,500’}, true],[‘Bob’, {v: 7000, f: ‘$7,000’}, true]
would display…

Mike $10,000 Checkmark
Jim $8,000 X
Alice $12,500 Checkmark
Bob $7,000 Checkmark

TO ADD A DATA TABLE
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select data Table Chart.
4. Type the following labels:

• Name
• Label
• Title

5. Type values in the following fields:

• Width
• Height

6. In the Value field, format your data.
7. If you want to break your table at certain points, in the Paging field, select enable and, in the Paging size field, type the number of rows you want the table to break after.
8. If you want the rows to be numbered, in the Row Numbers field, select true.
9. Click Save.

TO SET DATA TABLE OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Date Fields

A date field provides a calendar and time selector to let your user input the current date. Or an old date if they are behind on their work.

TO ADD A DATE FIELD
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select date.
4. Click Save.

TO SET DATE OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or

• Horizontal—Keeps the field on the same line.
3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Drop-down Lists

Doing this procedure will give you a drop-down list that will let your users select one of a bunch of options. You can customize a list with the options you set up yourself, or you can create a list that is populated with records from your application.

CREATING A LIST OF RECORDS
You can create a list that takes its options from the records in any state in your application. This lets you make a drop-down list that lists records in the application. For example, if you had a contact management application, you might have records for individuals and records for companies. With a drop-down list you could make a field on each page that lets your user pick the company an individual belongs to from a list. Every company that you have a record for would appear on that list. When a user adds a record for a company, that company would then automatically appear on the list.

TO ADD A DROP-DOWN LIST
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select list.
4. In the Item box, type the name of an item you want on the list and click Add.
5. To remove an item from the list, click it in the List Contents box and click Remove.
6. Repeat steps 4 and 5 until you have the list you want.
7. If you want the list to display all the options on the screen instead of having the user click the list to make it drop down, enable the Full Size box.
8. Click Save.

TO ADD A LIST OF RECORDS
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select list.
4. Enable the Use Data Source checkbox.
5. In the Source State box, choose a state.
6. In the Source Activity box, choose an activity.

NOTE! The state/activity’s records will appear in the drop-down list for users to choose.

7. If you want the list to display all the options on the screen instead of having the user click the list to make it drop down, enable the Full Size box.
8. Click Save.

TO SET LIST OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item
• Horizontal—Keeps the field on the same line

Adding an Email Functionality

Adding an email tool will give your users the functionality to check, write, and organize email within the application you create with Text-to-software.
Your users can add the information on their email account, server, etc. Once they have done this, they can use the application you create with Text-to-Software just like an email application.

TO ADD AN EMAIL FIELD
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select email.
4. Click Save.

TO SET EMAIL FIELD OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item
• Horizontal—Keeps the field on the same line

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Fields to Attach Files

An attachment field will let your users attach files, like HowISpentMySummerVacation.xlsx and BeforeIKillYouMisterBond_v34.docx.

NOTE! In the final application created by Text-to-Software, users can use the Open Word button to attach Microsoft Word docs. Any Word document that is attached using the Open Word button will automatically update with any changes the user makes. Unlike most applications, if a user edits the attached Word document, they won’t have to attach the document again for the changes to be visible.

TO ADD AN ATTACHMENT FIELD
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select attachment.
4. Click Save.

TO SET ATTACHMENT OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item
• Horizontal—Keeps the field on the same line

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Forums

Putting a forum on your page will add a place for users to discuss, interact, and argue with each other in posted messages.

TO ADD A FORUM
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select forum.
4. Click Save.

TO SET FORUM FIELD OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Gauge Charts

A gauge chart appears on the screen as a dial, sort of like the tachometer on your car. Similar to a tachometer, it has a green zone, a yellow zone, and a red zone. You can customize the percentage of the dial for each of these zones.

VALUE
The number you type in the Value box represents where the needle will be on the dial.

GAUGE MAX AND MIN
Your gauge doesn’t have to go from 0 to 100. You can customize the number range.

TICKED OFF
Major ticks are the large marks around the gauge’s dial. Minor ticks divide the space between the major ticks.

Major ticks and minor ticks are numbered a bit differently, and you’ll have to keep that in mind when you choose your number of ticks. The number of major ticks that appear is the number you choose. Period. So if you choose five major ticks, the application displays five ticks. But minor ticks actually count one major tick as a minor tick. So if you pick five minor ticks, you will get four ticks. (However, if you count the spaces between the ticks, there will be five of them.)

So, for minor ticks, if you want to see five ticks between the major ticks, you will have to specify six ticks in the Minor ticks box.

SEEING RED
The three colors of the gauge are called “green,” “yellow,” and “red,” but you can actually think of them as color 1, 2, and 3. You can customize each color using HTML color names and hexadecimal codes: http://www.w3schools.com/html/html_colornames.asp.
If you set “green” to start anywhere but 0, the dial will start with a white section. For example, if you set green to go from 25-50, then 0-24 will be white.

TO ADD A GAUGE CHART
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select gaugeChart.
4. Type names in the following fields:

• Name
• Label

5. In the Value field, type a number.
6. Type values in the following fields:

• Width
• Height

7. In the Major ticks field, type the number of major ticks you want.
8. In the Minor ticks field, type [X + 1], where X is the number of minor ticks you want.
9. Type values in the following fields:

• Gauge max
• Gauge min

10. Do the following:

• In the Green color box, type a color name or code.
• In the Green from box, type the percentage of the dial where you want the green color to start.
• In the Green to box, type the percentage of the dial where you want the green color to end.

11. Repeat step 9 and 10 for the Yellow color and Red color.
12. Click Save.

TO SET GAUGE CHART OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Geographical Charts

Geographical charts are maps that you can use to display the popularity of things in different countries or your progress in taking over the world.

Geographical charts have two modes: region and markers. The region mode fills whole countries with colors according to values you give it. The marker mode puts a circle in each country you specify. The circle will get bigger or smaller based on the values you give it.

TO ADD A GEOGRAPHICAL CHART FIELD
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select geoChart.
4. Type names in the following fields:

• Name
• Label
• Title

5. Type values in the following fields:

• Width
• Height

8. In the Region field, choose the region to display.
9. In the Mode field, choose the mode.
10. Click Save.

TO SET GEOGRAPHICAL CHART OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Input Fields

This procedure lets you create a box where users can type things like text and numbers. It’s a standard input box that you see in many software applications.

Helpful Tip! If you want to let the user write a large amount of text, consider using a text area instead.

TO ADD A FIELD WHERE USERS CAN TYPE
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select input Field.
4. Click Save.

TO SET INPUT FIELD OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Java Script Elements

To create an element that executes some JavaScript code, you have to be able to program in JavaScript.

TO ADD A JAVASCRIPT ELEMENT
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select JavaScript.
4. In the Format box, select <Define JavaScript Code>.
5. If you want to calculate once, enable the Calculate Once check box.
6. In the Java Script Code box, write or paste your code.
7. If you want to revert, click the Revert button.
8. If you want to do a test compile, click the Test Compile button.
9. Click Save.

TO SET JAVASCRIPT ELEMENT OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Labels

A label is a static bit of text that appears on the user interface of an application. They don’t have any buttons or fields associated with them.
You can use labels to organize your fields and forms, or to give your users a little extra information they might need.
For example, if your application was a recipe to help people make their very first salad, you would start with a list of ingredients, such as lettuce, avocado, and chicken. But that list might also have the ingredients for the dressing in it: olive oil, lemon, and poppy seeds.
In that case, you could use a label called “Dressing” to separate the two lists.
You could also use a label to inform the user of something they need to know, such as “Pressing this button will fry your hard drive,” or “The Text-to-Software Help file is awesome!”

TO ADD A LABEL FIELD
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select label.

NOTE! The name of the element/field will be the label.

4. Click Save.

TO SET LABEL OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Line Charts

Adding a line chart to your application isn’t hard. You can do it!

FORMATTING VALUES
You will have to format your values in a very specific way to have them appear how you want.
Each row of data must be enclosed in square brackets ([]) and separated from the next row with a comma. Example: [Row 1],[Row 2]. Okay?
Within the row, use commas to separate fields. [Row 1, Field 1, Field 2],[Row 2, Field 1, Field 2]
To identify a heading field, you must put your text in single quotes. For value (number) fields and text fields that aren’t headings, don’t put them in ‘s. To put it all together, these values…
[‘Year’, ‘Sales’, ‘Expenses’],[‘2004’, 1000, 400],[‘2005’, 1170, 460],[‘2006’, 660, 1120],[‘2007’, 1030, 540]
Will display like this… https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart

DANGEROUS CURVES AHEAD
If you would like the chart to round out the harsh angles of that straight line, Text-to-Software can do that for you. Just select function in the Curve Type box.

TO ADD A LINE CHART
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select line Chart.
4. Type text in the following boxes:

• Name
• Label
• Title

5. Type values in the following boxes:

• Width
• Height

6. In the Curve Type box, choose one of the following:

• function—A spiffy curved line.
• none—A funky angled line.

7. In the Legend box, choose where you would like the legend to display.
8. In the Tooltip trigger box, choose one of the following options:

• focus
• none

9. Click Save.

TO SET LINE CHART FIELD OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Logos

You can add a super-cool funktastic logo to your application. You have two different ways of doing it, depending on if the logo file is stored on the web, or on your computer.

TO ADD A LOGO THAT IS STORED ON THE WEB
1. Click File, Set Application Logo.
2. Type the URL where the logo is stored.
3. Click OK.
4. Click Yes.

TO ADD A LOGO THAT IS STORED ON YOUR COMPUTER
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select logo.
4. Click the graphic beneath the Preferred Width box.
5. Navigate to the logo, select it, and click Open.
6. Click Save.

TO SET OPTIONS FOR A LOGO STORED ON YOUR COMPUTER
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Maps

You can add a map to your Text-to-Software application. It’s pretty easy.

TO ADD A MAP
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select map.
4. Click Save.

TO SET MAP OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Navigation Elements

This procedure adds forward and back buttons to your application, letting your users go from screen to screen.
If you’re making a web application and you don’t enable the toolbar, it’s particularly good to enable these buttons. Otherwise your users won’t have a way of navigating through the screens of your application.

TO ADD NAVIGATION TO EACH SCREEN OF YOUR APPLICATION
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select navigator.
4. Click Save.

TO SET NAVIGATION OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Page Elements

A page is a large text box with lots of room for your users to write text. In a page, users can write paragraphs and paragraphs of text.

You should use a page instead of an input field when you know your users will be writing more than one line of text in the box, or when you want them to be able to hit the Enter key to separate paragraphs.

For example, use a page when you want your users to write their:

• Address;
• Work history

TO ADD A PAGE ELEMENT
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select page.
4. Click Save.

TO SET PAGE OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding PayPal Fields

TO ADD A PAYPAL™ FIELD
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select Payment.
4. In the Username box, type the email address associated with your PayPal account.
5. In the Password box, type your PayPal password.
6. In the API Key box, type your PayPal API key.
7. Click Save.

TO SET PAYPAL FIELD OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line to make the field show below the previous item; or
• Horizontal to keep the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Pie Charts

FORMATTING VALUES
You will have to format your values in a very specific way to have them appear how you want to (sorry).
Each row of data will be a slice of your pie.
Each row of data must be enclosed in square brackets ([]) and separated from the next row with a comma. Example: [‘Slice 1’],[‘Slice 2’]. Okay?
Within the row, use commas to separate fields. [‘Row 1’, 1],[‘Row 2’, 2]
The first row will be labels for the chart. For example, if you were making a chart that outlined the percentage of your day that you spend doing various activities, your first row might be: [‘Task’, ‘Hours per Day’]
After that, each row will have the label for the slice, then a number. The pie chart will turn that number into a percentage of the whole (All the numbers in the slices added up). To talk about the chart that divvies up your time that you spend on activities every day, your next rows could look like…
[‘Work’, 11],[‘Eat’, 2],[‘Commute’, 2],[‘Watch TV’, 2],[‘Sleep’, 7]

TO ADD A PIE CHART
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select pieChart.
4. Type the following labels:

• Name
• Label
• Title

5. Type values in the following fields:

• Width
• Height

6. If you want to give your pie chart a 3D look, choose true in the 3D box.
7. In the Legend box, choose where you would like the legend to display.
8. In the Tooltip text box, choose one of the following:

• value—The pie slice’s raw value
• percentage—The pie slice’s percentage
• both—Both the value and the percentage

9. In the Tooltip trigger box, choose one of the following options:

• focus—To make the tooltip trigger when the user hovers the mouse over the chart.
• none—No tooltip for you.

10. In the Value field, format your data.
11. Click Save.

TO SET PIE CHART FIELD OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Radio Buttons

A radio button is like a check box, except radio buttons are round.

TO ADD A RADIO BUTTON
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select radio Button.
4. Click Save.

TO SET RADIO BUTTON OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Real Estate Searches

Adding a real estate search to your application lets your users search for their dream home (or office, or cottage) through your application.

Using the real estate search, your users can input their criteria, such as city, price range, number of bedrooms. Your application will search MLS® on those criteria and display the result on a map.

TO ADD A REAL ESTATE SEARCH
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select realty Map.
4. Click Save.

TO SET REAL ESTATE SEARCH OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Search Field

You can add searching to your application so your users can find information they need.

TO ADD SEARCH
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select search Engine.
4. Click Save.

TO SET SEARCH ENGINE OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Security Management

Adding security management to your application lets your users manage information security and privacy through role-based access to data.
Users with the right level of access will be able to manage the security rights of other users, including setting their level of access (no access, read only, read/write).

TO ADD SECURITY MANAGEMENT
1. Ensure you are viewing UI screens—On the Requirements tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select security Manager.
4. Click Save.

TO SET SECURITY MANAGEMENT FIELD OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Spin Buttons

A spin button is a number field that is already populated with numbers. The user picks a number by clicking the up and down arrows on the right side of the field.

TO ADD SPIN BUTTON
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select spinButton.
4. Click Save.

TO SET SPIN BUTTON OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Text Areas Fields

Like input fields, text areas fields let users type in text (and numbers and characters). The difference is that text areas are larger and let users write paragraphs, with hard returns after them.

TO ADD A TEXT AREA
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select textArea.
4. Click Save.

TO SET TEXT AREA FIELD OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Time Fields

TO ADD A TIME FIELD
1. Ensure you are viewing UI screens—On the Requirements tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select time.
4. Click Save.

TO SET TIME FIELD OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Adding Upload Image Field

An upload image field lets your users upload an image file, which are then displayed in the window. Being displayed is the difference between an attachment Smart Part and an image Smart Part. A user can upload an image as an attachment, but the image will only be attached, not displayed.

In practical terms, let’s say you are designing a database of global supervillains that Commander Bond can search to find out the nefarious evildoer behind the latest threat to the security of all free countries. When you are creating this application, you might want to use an attachment field to let someone upload each scoundrel’s rap sheet and court documents. The user will be able to download those documents to go over them. You will also want the record for each villain to show the baddie’s face so they can be identified on sight. For that, use an image field and the user will be able to upload a shot of the bad guy’s latest disguise.

The user will be able to add images, and delete them.

TO ADD AN IMAGE FIELD
1. Ensure you are viewing UI screens—On the Requirements tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select image.
4. Click Save.

TO SET IMAGE FIELD OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Displaying Large Amounts of Text

The Page Smart Part lets you display a large amount of text right there on the screen of your Text-to-software application.

TO ADD A PAGE FIELD
1. Ensure you are viewing UI screens—On the Requirements Analysis tab, right-click in the States box and click Show UI States.
2. Right-click a field in the Fields list and click Smart Parts.
3. In the Element Type box, select Page.
4. Type or paste your text into the Page Content field.
5. Click Save.

TO SET PAGE FIELD OPTIONS
1. Type values (in pixels) in the following boxes:

• Preferred Width
• Preferred Height

2. In the Direction box, choose one of the following:

• New Line—Makes the field show below the previous item; or
• Horizontal—Keeps the field on the same line.

3. To add space between this field and the previous one, type a number in the Skip Positions box. The larger the number, the more space.

Previous Working with Servers
Next Working with States
Table of Contents