Add Platform-Specific Files

Filter by IDE
Select the AppBuilder client you are currently using for development.

IDE

You can create new or import existing platform-specific files to your app. When you add platform-specific files to your app, AppBuilder shows them as file groups in the Project Navigator in the classic Windows desktop client, the universal desktop client and the in-browser client and in the Solution Explorer in the extension for Visual Studio.

If the platform-specific files are named name.ios.extension, name.wp8.extension and name.android.extension, the file group is named name.extension. If the platform-specific files are named name.configuration.ios.extension, name.configuration.android.extension or name.configuration.wp8.extension, AppBuilder nests them under the name.configuration.extension file group, which is nested under the name.extension file group.

You cannot run commands on file groups.

Prerequisites

  • Verify that your preferred AppBuilder client is running and you are logged in.
  • Verify that you have opened the code for your app in AppBuilder.

Procedure

In-Browser

  • Create new file.

    1. In the Project Navigator, select the location where you want to add the platform-specific file.
    2. In the top menu bar, click AddNew File.
    3. Select the file type that you want to add, provide a name and click Ok.

      • For platform-specific-only files, provide a file name in the following format: name.platform.extension

        index.ios.html
        main.android.js
        style.wp8.css
        
      • For files which are both platform- and configuration-specific, provide a file name in the following format: name.configuration.platform.extension.

        index.debug.ios.html
        main.debug.android.js
        style.debug.wp8.css
        
        index.release.ios.html
        main.release.android.js
        style.release.wp8.css
        
  • Import existing file.

    1. In the Project Navigator, select the location where you want to add the platform-specific file.
    2. In the top menu bar, click AddExisting Files.
    3. Drag and drop the files that you want to import from your file explorer to the drop files here to upload text box.

      • For platform-specific-only files, provide a file name in the following format: name.platform.extension

        index.ios.html
        main.android.js
        style.wp8.css
        
      • For files which are both platform- and configuration-specific, provide a file name in the following format: name.configuration.platform.extension.

        index.debug.ios.html
        main.debug.android.js
        style.debug.wp8.css
        
        index.release.ios.html
        main.release.android.js
        style.release.wp8.css
        
    4. Click Upload.

Universal

  • Create new file.

    1. In the Project Navigator, select the location where you want to add the platform-specific file.
    2. In the top menu bar, click AddNew File.
    3. Select the file type that you want to add, provide a name and click Ok.

      • For platform-specific-only files, provide a file name in the following format: name.platform.extension

        index.ios.html
        main.android.js
        style.wp8.css
        
      • For files which are both platform- and configuration-specific, provide a file name in the following format: name.configuration.platform.extension.

        index.debug.ios.html
        main.debug.android.js
        style.debug.wp8.css
        
        index.release.ios.html
        main.release.android.js
        style.release.wp8.css
        
  • Import existing file.

    1. In the Project Navigator, select the location where you want to add the platform-specific file.
    2. In the top menu bar, click AddExisting Files.
    3. Drag and drop the files that you want to import from your file explorer to the drop files here to upload text box.

      • For platform-specific-only files, provide a file name in the following format: name.platform.extension

        index.ios.html
        main.android.js
        style.wp8.css
        
      • For files which are both platform- and configuration-specific, provide a file name in the following format: name.configuration.platform.extension.

        index.debug.ios.html
        main.debug.android.js
        style.debug.wp8.css
        
        index.release.ios.html
        main.release.android.js
        style.release.wp8.css
        
    4. Click Upload.

Windows

  • Create new file.

    1. In the Project Navigator, select the location where you want to add the platform-specific file.
    2. In the top menu bar, click AddNew File.
    3. Select the file type that you want to add, provide a name and click Ok.

      • For platform-specific-only files, provide a file name in the following format: name.platform.extension

        index.ios.html
        main.android.js
        style.wp8.css
        
      • For files which are both platform- and configuration-specific, provide a file name in the following format: name.configuration.platform.extension

        index.debug.ios.html
        main.debug.android.js
        style.debug.wp8.css
        
        index.release.ios.html
        main.release.android.js
        style.release.wp8.css
        
  • Import existing file.

    1. In the Project Navigator, select the location where you want to add the platform-specific file.
    2. In the top menu bar, click AddExisting Files.
    3. Browse to locate the platform-specific files and click Open.

      • For platform-specific-only files, provide a file name in the following format: name.platform.extension

        index.ios.html
        main.android.js
        style.wp8.css
        
      • For files which are both platform- and configuration-specific, provide a file name in the following format: name.configuration.platform.extension.

        index.debug.ios.html
        main.debug.android.js
        style.debug.wp8.css
        
        index.release.ios.html
        main.release.android.js
        style.release.wp8.css
        

Visual Studio

  • Create new file.

    1. In the Solution Explorer, right-click the location where you want to add the platform-specific file.
    2. From the context menu, select AddNew Item.
    3. Select the file type that you want to add, provide a name and click Add.

      • For platform-specific-only files, provide a file name in the following format: name.platform.extension

        index.ios.html
        main.android.js
        style.wp8.css
        
      • For files which are both platform- and configuration-specific, provide a file name in the following format: name.configuration.platform.extension.

        index.debug.ios.html
        main.debug.android.js
        style.debug.wp8.css
        
        index.release.ios.html
        main.release.android.js
        style.release.wp8.css
        
  • Import existing file.

    1. In the Solution Explorer, right-click the location where you want to add the platform-specific file.
    2. From the context menu, select AddExisting Item.
    3. Browse to locate the platform-specific file, select it and click Add.

      • For platform-specific-only files, provide a file name in the following format: name.platform.extension

        index.ios.html
        main.android.js
        style.wp8.css
        
      • For files which are both platform- and configuration-specific, provide a file name in the following format: name.configuration.platform.extension.

        index.debug.ios.html
        main.debug.android.js
        style.debug.wp8.css
        
        index.release.ios.html
        main.release.android.js
        style.release.wp8.css
        

CLI

In a file explorer, manage the files and folders of your locally stored app. Note that your files must comply with the following specifications:

  • For platform-specific-only files, use a file name in the following format: name.platform.extension

    index.ios.html
    main.android.js
    style.wp8.css
    
  • For files which are both platform- and configuration-specific, use a file name in the following format: name.configuration.platform.extension.

    index.debug.ios.html
    main.debug.android.js
    style.debug.wp8.css
    
    index.release.ios.html
    main.release.android.js
    style.release.wp8.css
    

Next Steps

Reference the platform-specific files.

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.