Automated Creation

When you develop apps with the command-line interface and Screen Builder, you can avoid providing your configuration through the command-line prompts. You can pass a JSON file containing your configuration information to the command-line interface when running Screen Builder commands. If you omit one or more required values, the command-line interface will prompt you to provide them.

Prerequisites

  • Verify that you have stored the configuration that you want to use in a valid JSON file. For more information about the JSON format required by the command-line interface, see JSON Specification.
  • Verify that you are running the command-line interface.
  • If you want to configure an existing app, verify that the app was created with Screen Builder. Screen Builder apps contain .app.json and .yo-rc.json files.

Procedure

Create App from File

  • Run the following command.
appbuilder create screenbuilder MyApp --answers <Path to locally stored JSON File>

OR

appbuilder create MyApp --answers <Path to locally stored JSON File>

Configure an Existing App

Operation Command
Add a data provider from file appbuilder add-dataprovider --answers <Path to locally stored JSON File>
Add a view from file appbuilder add-view --answers <Path to locally stored JSON File>
Add a form from file appbuilder add-form --answers <Path to locally stored JSON File>
Add a field from file appbuilder add-field --answers <Path to locally stored JSON File>
Add an authentication form from file appbuilder add-authentication --answers <Path to locally stored JSON File>
Add a list from file appbuilder add-list --answers <Path to locally stored JSON File>
Add an about form from file appbuilder add-about --answers <Path to locally stored JSON File>

JSON Specification

The complete schema against which the command-line interface validates

create

Setting Valid Values Dependencies Description
name (User-defined) No limitations   Sets your app name.
navigation
  • tabstrip
  • drawer
  • listmenu
  • none
  • tabstrip: transition
  • drawer: transition
Sets the navigation model for your app.
view (User-defined) The name of any view in your app   Sets the view that will act as a home page for your app.
skin
  • flat
  • native
  Sets the skin for your app.
transition
  • none
  • overlay
  • slide
  • zoom
  • fade
  • navigation: tabstrip
  • navigation: listmenu
Sets the transition effects of your app.

Example

This create.json file will create a new app with the following settings.

  • Tabstrip navigation
  • Home page set to the home view
  • Flat skin
  • No transition effects when navigating between views
{
    "name": "myAppName",
    "navigation": "tabstrip",
    "view": "home",
    "skin": "flat",
    "transition": "none" 
}

add-dataprovider

Setting Valid Values Dependencies Description
name (User-defined) No limitations   Sets the name of the data provider.
title (User-defined) No limitations   Sets the title of the data provider.
source
  • everlive
  • everliveKey
  • everliveUrl
  • offlineStorage
Sets the type of the data provider that you want to use.
 
  • odata
url  
 
  • json
url  
 
  • jsdo
  • url
  • catalogUrl
  • authentication
 
everliveKey (User-defined) The API key for an existing Backend Services app everlive Sets the API key for your Backend Services apps.
everliveUrl //api.everlive.com/v1/ or the //address to a custom Backend Services server everlive Sets the web server which handles Backend Services API calls.
offlineStorage
  • true
  • false
everlive Indicates whether offline mode is enabled or disabled for your app.
url (User-defined) A valid URL
  • odata
  • jsdo
Sets the web service URL for your data provider.
catalogUrl (User-defined) A valid URL to a valid JSDO Catalog jsdo Sets the JSDO Catalog pathname for your Progress Data Service data provider.
authentication
  • anonymous
  • basic
  • form
jsdo Sets the authentication type for your Progress Data Service data provider.

Example

This data-provider.json file will create a new Backend Services data provider enabled for offline mode.

{
    "name": "myDataProvider",
    "title": "My Data Provider",
    "source": "everlive",
    "everliveKey": "my-api-key",
    "everliveUrl": "//api.everlive.com/v1/",
    "offlineStorage": true
}

add-view

Setting Valid Values Dependencies Description
name (User-defined) No limitations   Sets the name of the view.
title (User-defined) No limitations   Sets the title of the view.
addToNavigation
  • true
  • false
icon Indicates if the view is listed in the navigation model of the app.
icon (User-defined) The name of an icon as listed at http://docs.telerik.com/kendo-ui/mobile/icons addToNavigation Sets an icon for the new view. The icon appears in the navigation.

Example

This view.json file will add a new view to your app.

{
    "name": "myView",
    "title": "My View",
    "addToNavigation": true,
    "icon": "favorites"
}

add-form

Setting Valid Values Description
name (User-defined) No limitations Sets the name of the form.
parent (User-defined) The name of an existing view, preferably an empty view Sets the view which will contain the form.
submitButton (User-defined) No limitations Sets the label on the submission button of the form. For example: "Confirm".
cancelButton (User-defined) No limitations Sets the label on the cancellation button of the form. For example: "Cancel".

Example

This form.json file will add a new form in the previously added myView view. Note that the specified parent view must exist in your app.

{
    "name": "myForm",
    "parent": "myView",
    "submitButton": "Confirm",
    "cancelButton": "Cancel"
}

add-field

Setting Valid Values Dependencies Description
name (User-defined) No limitations   Sets the name of the field.
title (User-defined) No limitations   Sets the title of the field.
parent (User-defined) The name of an existing form   Sets the form which will contain the field.
inputType
  • text
  • search
  • password
  • email
  • url
  • tel
  • number
  • date
  • datetime-local
  • time
  • group-separator
  • radio
  • checkbox
  • switch
  • dropdownlist
  • text: placeholder
  • search: placeholder
  • password: placeholder
  • email: placeholder
  • radio: group
  • url: placeholder
  • tel: placeholder
Sets the input type of the field.
placeholder (User-defined) No limitations
  • inputType: text
  • inputType: search
  • inputType: password
  • inputType: email
  • inputType: url
  • inputType: tel
Sets a placeholder text for the input field.
group (User-defined) No limitations radio Sets the group of radio buttons to which your radio button belongs.

Example

This field.json will add a new check box to the previously added myForm form. Note that the specified form must exist in your app.

{
    "name": "myField",
    "title": "I agree with the terms and conditions.",
    "parent": "myForm",
    "inputType": "email",
    "placeholder": "user@example.org"
}

add-authentication

Setting Valid Values Dependencies Description
name (User-defined) No limitations   Sets the name for the authentication form.
parent (User-defined) The name of an existing view, preferably an empty view   Sets the view which will contain the authentication form.
dataProvider (User-defined) The name of an already added data provider   Sets the data provider which will provide user management for your authentication form.
emailLabel (User-defined) No limitations   Sets the label for the email field in the sign-in form.
emailPlaceholder (User-defined) No limitations   Sets the placeholder text for the email field in the sign-in form.
passwordLabel (User-defined) No limitations   Sets the label for the password field in the sign-in form.
passwordPlaceholder (User-defined) No limitations   Sets the placeholder text for the password field in the sign-in form.
signinLabel (User-defined) No limitations   Sets the label for the sign-in button. This button initiates user sign-in with the provided credentials.
signinRedirect (User-defined) No limitations   Sets the view to which your app will navigate after a successful login.
gotoRegisterLabel (User-defined) No limitations enableRegistration Sets the label for the sign-up button. This button navigates to the sign-up form.
enableRegistration
  • true
  • false
  • gotoRegisterLabel
  • registerEmailLabel
  • registerPasswordLabel
  • registerNameLabel
  • registerLabel
  • registerRedirect
  • gotoSigninLabel
Indicates whether you want to add sign-up functionality to the form.
registerEmailLabel (User-defined) No limitations enableRegistration Sets the label for the email field in the sign-up form.
registerEmailPlaceholder (User-defined) No limitations enableRegistration Sets the placeholder text for the email field in the sign-up form.
registerPasswordLabel (User-defined) No limitations enableRegistration Sets the label for the password field in the sign-up form.
registerPasswordPlaceholder (User-defined) No limitations enableRegistration Sets the placeholder text for the password field in the sign-up form.
registerNameLabel (User-defined) No limitations enableRegistration Sets the label for the name field in the sign-up form.
registerNamePlaceholder (User-defined) No limitations enableRegistration Sets the placeholder text for the name field in the sign-up form.
registerLabel (User-defined) No limitations enableRegistration Sets the label for the sign-up button. This button initiates user sign-up with the provided information.
registerRedirect (User-defined) No limitations enableRegistration Sets the view to which your app will navigate after a successful registration.
gotoSigninLabel (User-defined) No limitations enableRegistration Sets the label for the sign-in button. This button navigates to the sign-in form.

Example

This login.json will add a new login form to the home view. Note that the specified parent view and data provider must exist in your app.

{
    "name": "myLogin",
    "parent": "home",
    "dataProvider": "myDataProvider",
    "emailLabel": "Email Address",
    "emailPlaceholder": "user@example.com",
    "passwordLabel": "Password",
    "passwordPlaceholder": "p@s$w0rD",
    "signinLabel": "Log In",
    "signinRedirect": "myView",
    "gotoRegisterLabel": "Register",
    "enableRegistration": false
}

add-list

Setting Valid Values Dependencies Description
name (User-defined) No limitations   Sets the name of the list.
parent (User-defined) The name of an existing view, preferably an empty view   Sets the view which will contain the list.
dataProvider (User-defined) The name of an already added data provider
  • collection
  • iconField
  • headerField
  • filterField
  • imageField
  • subHeaderField
  • group
Sets the data provider which will provide data for the list view.
collection (User-defined) No limitations dataProvider Sets the name of the data collection displayed by the list view.
iconField
  • true
  • false
dataProvider Indicates if the app shows an icon next to each item in the list view.
imageField (User-defined) The name of an existing field in the data collection dataProvider Maps the image field in the list view to a field from the data collection.
headerField (User-defined) The name of an existing field in the data collection dataProvider Maps the header field in the list view to a field from the data collection.
subHeaderField (User-defined) The name of an existing field in the data collection dataProvider Maps the sub-header field in the list view to a field from the data collection.
masterDetails
  • true
  • false
  • detailDescriptionField
  • detailSubHeaderField
  • detailHeaderField
  • detailImageField
Indicates whether the list view is a maser-details view.
detailHeaderField (User-defined) The name of an existing field in the data collection masterDetails Maps the header field in the details view to a field from the data collection.
detailSubHeaderField (User-defined) The name of an existing field in the data collection masterDetails Maps the sub-header field in the details view to a field from the data collection.
detailDescriptionField (User-defined) The name of an existing field in the data collection masterDetails Maps the description field in the details view to a field from the data collection.
detailImageField (User-defined) The name of an existing field in the data collection masterDetails Maps the image field in the details view to a field from the data collection.
pullToRefresh
  • true
  • false
  Enables pull-to-refresh functionality in your list view.
endlessScroll
  • true
  • false
  Enables endless scrolling in your list view.
filterField (User-defined) The name of an existing field in the data collection dataProvider Enables filtering of the list items by matching the user input to a specified text field from the data collection.
group (User-defined) The name of an existing field in the data collection dataProvider Groups the list items by the specified text field from the data collection.

Example

This login.json will add a new list to an existing view. The data is provided from an existing data provider. The list provides pull-to-refresh functionality and endless scrolling. Note that the specified parent view and data provider must exist in your app.

{
    "name": "myList",
    "parent": "myListView",
    "dataProvider": "myDataProvider",
    "masterDetails": false,
    "pullToRefresh": true,
    "endlessScroll": true,
    "collection": "",
    "iconField": false,
    "imageField": "",
    "headerField": "",
    "subHeaderField": "",
    "filterField": ""
}

add-about

Setting Valid Values Dependencies Description
name (User-defined) No limitations   Sets the name of the about form.
parent (User-defined) The name of an existing view, preferably an empty view   Sets the view which will contain the about information.
appName (User-defined) No limitations   Sets the name of your application, shown in the about form.
appVersion (User-defined) No limitations   Sets the version of your application, shown in the about form.
appIcon (User-defined) The absolute path to an image on your system   Sets the application icon, shown in the about form.
appIconData Leave empty   Provides the base64-encoded image data for the application icon.
appDescription (User-defined) No limitations   Sets the description of your application, shown in the about form.
contactButton
  • true
  • false
  • contactLabel
  • contactMail
If true, adds a contacts button to the about form. Tapping the contacts button opens the default mail client of the device and attempts to send an email to a pre-defined email address.
contactLabel (User-defined) No limitations contactButton Sets the label of the contacts button in the about form.
contactMail (User-defined) A valid email address contactButton Sets the email to which the app will send feedback emails.
facebookButton
  • true
  • false
  • facebookLabel
  • facebookLink
If true, adds a Facebook button to the about form. Tapping the Facebook button navigates to the Facebook page of the app or the vendor.
facebookLabel (User-defined) No limitations facebookButton Sets the label for the Facebook button in the about form.
facebookLink (User-defined) A valid URL to a Facebook page facebookButton Sets the link to the Facebook page of your app or company.
twitterButton
  • true
  • false
  • twitterLabel
  • twitterLink
If true, adds a Twitter button to the about form. Tapping the Twitter button opens navigates to the Twitter account for the app or the vendor.
twitterLabel (User-defined) No limitations twitterButton Sets the label for the Twitter button in the about form.
twitterLink (User-defined) A valid URL to a Twitter account twitterButton Sets the link to the Twitter page of your app or company.

Example

This about.json will add a new about form to an existing view. The about form contains a Facebook button and a Twitter button. Note that the specified parent view must exist in your app.

{
    "name": "about",
    "parent": "myAboutView",
    "appName": "Hybrid App",
    "appVersion": "beta",
    "appIcon": "",
    "appIconData": "",
    "appDescription": "This is a sample Screen Builder app.",
    "contactButton": false,
    "facebookButton": true,
    "facebookLabel": "Find us on Facebook",
    "facebookLink": "https://www.facebook.com/Telerik",
    "twitterButton": true,
    "twitterLabel": "Follow us on Twitter",
    "twitterLink": "https://twitter.com/telerik"
}

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.