Looking for the old docs site? You can still view it for a limited time here.

Use the Code Editor

App Studio’s interface includes a built-in code editor that opens in your browser.

The code editor modifies the file that configures your search interface (app-studio/app/views/search.html in version 4.0), using App Studio’s markup tags. Your search interface reloads automatically when you save your changes in the code editor.

The code editor is also where you can publish your search interface to Fusion Server.

Opening the code editor

How to open the code editor
  • Press the ESC key

    or

  • Click the code editor button: Code editor button

Code Editor

The toolbar

Code editor toolbar

Code editor toolbar

Directories in the Code Editor

Directory structure in the code editor

When you open the code editor, the files that configure the current search UI are available on the left:

Code editor file selector

  • By default, views/search.html is selected for editing. This is the main file that controls the layout and styling of your search UI. The files in views/partials control the layout and styling of the header and footer of your UI.

  • conf contains App Studio configuration files.

  • assets contains image files, stylesheets, and other Web assets.

  • styles contains the .less files that configure the theme of the UI. When your UI requires custom stylesheet information, add it to /app/styles/includes/custom.less.

Saving your changes

The Save button (or ⌘-S/CTRL-S) saves the file and reloads the page to display your updated interface:

Save

Publishing your search interface from the code editor (version 4.0)

The Publish button deploys your search interface to Fusion. App Studio prompts you to confirm that you want to publish your Web app to Fusion:

Publish to Fusion

Click Publish to complete the deployment.

When deployment is complete, App Studio displays the Fusion URL where you can access your search interface:

Publication finished