Create Custom Code Snippets

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

IDE

You can create your own custom code snippets to expand the default selection in AppBuilder. You can create custom code snippets for HTML, CSS and JavaScript.

In the classic Windows desktop client, you need to create each custom snippet as a new file that complies with the Sublime syntax for code snippets. For more information about Sublime code snippets, see Extending Sublime Text with Snippets.

In the extension for Visual Studio, you can use the code snippet manager built in Microsoft Visual Studio to expand your code snippet collection.

Custom code snippets are not global and accessible across all AppBuilder clients. You need to add them for each AppBuilder client separately.

Procedure

In-Browser

In this version of the in-browser client, you cannot use code snippets or create custom code snippets.

Universal

In this version of the universal desktop client, you cannot use code snippets or create custom code snippets.

Windows

  1. Close running instances of the classic Windows desktop client.
  2. In Windows Explorer, go to %LOCALAPPDATA%\Telerik\BlackDragon</code>.
  3. If not present, create a new Snippets folder.
  4. Open the Snippets folder.
  5. (Optional) Create a new folder to store your custom code snippets.
  6. Create an empty XML file and change its extension to sublime-snippet.
  7. Open the file in a text editor with code editing capabilities. For example, Notepad++ or Sublime.
  8. Replace any contents with the following markup.

    <snippet>
      <content><![CDATA[Type your snippet here.]]></content>
      <tabTrigger>appbuilder</tabTrigger>
      <scope>text.html</scope>
      <description>My snippet.</description>
    </snippet>
    
  9. In the <content> block, provide the code for your custom snippet.
    The code must comply with the syntax for Sublime code snippets. For more information about Sublime code snippets, see Extending Sublime Text with Snippets.
  10. In the <tabTrigger> block, provide the shortcut with which you want to insert your snippet.
  11. (Optional) In the <scope> block, set the target code in which the shortcut will be active.
    For example, to make the code snippet available only for JavaScript, set source.js as scope.
    If not set, the code snippet will be available in any code.
  12. (Optional) In the <description> block, provide a description for the code snippet.
    The classic Windows desktop client shows the description as a tool tip in the code completion menu.
  13. Save changes and close the file.
  14. Run the classic Windows desktop client.

If you need to perform a clean install of the classic Windows desktop client by deleting the %LOCALAPPDATA%\Telerik\BlackDragon\ folder and its contents, make sure to back up the Snippets folder. After reinstalling the classic Windows desktop client, you need to manually restore the Snippets folder and its contents.

Visual Studio

To perform this operation, apply your preferred Microsoft Visual Studio approach, extension or tool. For more information about creating custom code snippets in Microsoft Visual Studio, see Walkthrough: Creating a Code Snippet.

CLI

To perform this operation, apply the approach or tool available for your current IDE.

Example: Sample code snippet markup

The following code snippet inserts an else...if statement in your code.

<snippet>
  <content><![CDATA[else if(${1:condition}){
        ${0}${selection}
      }]]></content>
  <tabTrigger>elseif</tabTrigger>
  <scope>source.js</scope>
  <description>
      Creates an else...if statement.
  </description>
</snippet>

Next Steps

Write code by using your custom code snippets.

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.