When you first create a UI using the setup wizard, it configures the default search view. App Studio supports customization using an array of markup elements, or tags, that handle all the complexities of connecting to Fusion and visualizing the response to your queries. These topics explain the details of how to customize your search interface: Additional resources:
App Studio supports the ability to generate suggestions on the fly, also called autocomplete or type-ahead, using the Terms component or Suggest component embedded in Fusion’s Solr core.The Solr Terms component provides access to the indexed terms in a field and the number of documents that match each term. This can be used, for example, to find all terms in the Solr index that match an expansion of the given query term. For example, “car” might return CARRY, CARRIED, CARE, CARL, and so on.
Since the Terms component only allows suggestions one term at a time, in cases when multiple terms are being typed, suggestions are given for the last term typed.
How to configure suggestions with the Terms component
  1. Configure Fusion:
    1. In Fusion, navigate to Querying > Query Pipelines.
    2. Select the query pipeline you are using.
    3. Select the Solr Query pipeline stage.
    4. Under configure Request Handlers Allowed for Queries, click Add Add.
    5. Enter “Terms”. Add a request handler
    6. Click Save.
      Unlike the Suggest component, you do not need to modify solrconfig.xml to use the Terms component; it is preconfigured.
  2. Configure App Studio:
    1. Open config/services/suggestions/terms.conf. Its default content is as follows: 
      name: twigkit.search.solr.suggestions.SolrQueryTermsService
source: platforms.fusion

# List out all fields to base your terms suggestions on
term-fields: title
title:
    2. Change the default source: platforms.fusion to source: platforms.fusion.data.
    3. Edit the value of term-fields as a comma-separated list of fields in your data from which to retrieve terms.
      This corresponds to Solr’s terms.fl parameter.
    4. Edit the value of title to describe the group of suggestions returned by Fusion. This title can be used to group suggestions in the UI. If you are implementing only one group of suggestions, you can leave this blank or set it to something generic, like “Suggested phrases”.
    5. Save and close the file.
    6. Open app/views/partials/header.tpl.html.
    7. Uncomment the following line: 
      <query-suggestions completion-service="services.suggestions.terms" action="/search"></query-suggestions>
    8. Save the file.
  3. Refresh the search UI in your browser.
  4. Test the feature by typing a search phrase. App Studio now displays suggested terms on the fly: Suggested terms
You can localize the UI labels in an app in multiple languages of your choice.Appkit obtains the correct labels for a language by making calls to an Appkit translation service. The service provides a label in the chosen language, with a fallback to English if no translation exists for the label in the chosen language.

​
Loading translations

You can use the new <translations:localize> JSP tag to load a set of UI label translations into an app. The tag syntax is:
<translations:localize dictionary="dictionary" locale="locale" />
  • dictionary. Name of the resource bundle from which to load translations. This is also the first part of the name of each property file that contains translations. Default: translations
  • locale. Locale Default: en (English)
The dictionary and locale are used to find the file as follows:
  1. In src/main/resources, the Appkit translation service looks for a resource bundle named dictionary, for example, translations.
  2. Within the resource bundle, the translation service looks for property files named {resource}, for example, for the files translations_en.properties and translations_fr.properties.

​
Enabling translations

  1. Find label strings that need to be translated in the UI and identify the key names for the labels.
  2. Create translation property files and add them under the src/main/resources directory. For example, for a dictionary called translations add translations_en.properties and translations_fr.properties.
    Edit the property files and include the label keys and translations. For example: In translations_en.properties: 
    # translations_en.properties
...
components.pagination.next = Next
components.pagination.previous = Previous
...
    In translations_fr.properties: 
    # translations_fr.properties
...
components.pagination.next = Suivant
components.pagination.previous = Précédent
...
    Some translations include variables. For example, components.response-statistics.showing is Showing {first} - {last} of {total} in English. Translations should retain the variables, though their order might differ. Labels can use <em> tags for emphasis, for example, More results like <em>{result}</em>.
  3. Add the following dependency to your app’s pom.xml: 
    <!-- Twigkit translations -->
<dependency>
    <groupId>twigkit</groupId>
    <artifactId>twigkit.translations</artifactId>
    <version>${project.parent.version}</version>
</dependency>
  4. Add this taglib directive at the top of your app’s index.jsp: 
    <%@ taglib prefix="translations" uri="/twigkit/translations" %>
  5. Add the Appkit <translations:localize> JSP tag inside the <head> element of your app’s index.jsp: 
    <translations:localize locale="${param.locale}" />
  6. Add this rule to the url-rules.xml file: 
    <!-- Language specific pages -->
<rule>
    <from>^/lang/(.*)/</from>
    <to last="true">/index.jsp?locale=$1</to>
</rule>
    You can modify other URL rules to suit your application logic. The <translations:localize> JSP tag works the same.
  7. Restart your app.
  8. Verify that the translations are present by visiting pages in the app that should be in different languages.
This deployment type is useful for:
  • Evaluating App Studio
  • Previewing the UI during development
  • Demoing your UI
In order to run your UI in demo mode, you need a downloaded project.From your project directory, run app-studio start or app-studio.bat start and go to http://localhost:8080/ to view your demo deployment. The code editor is available in the demo interface; you can hide this by using the --production flag.

​
Start up in demo mode

Run the app-studio or app-studio.bat script like this:
app-studio start [--production] [-f] [-p port] [-m memory] [-t timeout] [-V]
After startup, your demo deployment is available at http://localhost:8080/.
—productionRun App Studio in “production mode”, with the code editor and wizard disabled. This gives you a preview of what your UI will look like in a production deployment.
-fStart App Studio in the foreground. By default, App Studio starts in the background and sends stdout/stderr to app-studio-PORT-console.log.
-p <port>Specify the port on which to start the App Studio Web server; the default is 8080.
-m <memory>Set the minimum (-Xms) and maximum (-Xmx) heap size for the JVM, such as -m 4g which results in -Xms4g -Xmx4g. By default, this script sets the heap size to 512MB.
-t <timeout> Set the startup timeout in seconds; the default is 120.

​
Shut down in demo mode

To shut down your demo application, run app-studio stop or app-studio.bat stop:
app-studio stop [-p port] [-V]
The optional -p flag specifies the port to which the App Studio HTTP listener is bound.
You can edit the default view in your browser using the Code Editor or you can Download an App Studio Project in order to develop it using your own IDE or store it in a source control repository.
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

​
Saving your changes

The Save button (or &#8984;-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 FusionClick Publish to complete the deployment.When deployment is complete, App Studio displays the Fusion URL where you can access your search interface:Publication finished
If you prefer to develop your search interface using your own tools, you can download it as a .zip file.The project directory includes tools for running a demo deployment or compiling an application for a production deployment.

​
Downloading a project from Fusion

You can download your App Studio project as a .zip file from its configuration panel in App Studio.
This option is unavailable after you have uploaded a WAR file for the project.
  1. From the App Studio menu, select your project: The project configuration panel appears.
  2. Click Download project: Download project Your browser downloads the project as a .zip file.

​
Deploying a project

There are several ways to deploy a project. For information, see Deployment Overview.