App Development

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:

Configure Autocomplete

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

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 .
5. Enter “Terms”.
6. Click Save.
  Unlike the Suggest component, you do not need to modify solrconfig.xml to use the Terms component; it is preconfigured.
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.
Refresh the search UI in your browser.
Test the feature by typing a search phrase. App Studio now displays suggested terms on the fly:

The remaining attributes shown above are optional and are the same as described above for when backwards compatibility is disabled.

Localize an App

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:

In src/main/resources, the Appkit translation service looks for a resource bundle named dictionary, for example, translations.
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

Find label strings that need to be translated in the UI and identify the key names for the labels.
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>.

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>

Add this taglib directive at the top of your app’s index.jsp:

<%@ taglib prefix="translations" uri="/twigkit/translations" %>

Add the Appkit <translations:localize> JSP tag inside the <head> element of your app’s index.jsp:
```
<translations:localize locale="${param.locale}" />
```
Add this rule to the url-rules.xml file:
```

<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.
Restart your app.
Verify that the translations are present by visiting pages in the app that should be in different languages.

Run App Studio in Demo Mode

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/.


—production	Run 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.
-f	Start 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.

Use the Code Editor

Download an App Studio Project

You can get detailed information about every App Studio markup tag in the Reference Guides.
For ideas and reusable code, see the App Studio Gallery.

Fusion Server

Fusion AI

App Studio

Loading translations

Enabling translations

Start up in demo mode

Shut down in demo mode

Opening the code editor

Saving your changes

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

Downloading a project from Fusion

Deploying a project