Client Configuration

The following sections describe the client-side modules and parameters you should configure before deploying your Influent application.

NOTE: For a complete list of configurable client-side parameters, see the Client Settings reference topic.

Header

The Influent header contains information about the data source to which the application is connected and links to the developer and end user help.

To edit the Influent header components
  1. Open the branding.css file in your project's src/main/webapp/theme/ folder.
  2. Edit the value of the content property for the .banner-text:before selector to modify the banner that indicates the scope of the source dataset.
  3. Save the branding.css file.
  4. Open the client-config.js file in your project's src/main/resources/ folder.
  5. Edit the datasource parameter to specify the name of your data source. In a secure environment, this property can be used to display classification.
  6. Edit the title to specify the title of your application as it will appear in the end user's Web browser and bookmarked links.

Influent Header Components

Transaction Flow

The Flow view, Influent's workspace for investigating the flow of transactions, allows users to visualize activity over a customizable date range.

To specify the default date range
  1. In your client-config.js file, set the startingDateRange to one of the following values:
    Value Description
    P14D 2 weeks
    P112D 16 weeks
    P1Y 1 year
    P16M 16 months
    P4Y 4 years
    P16Y 16 years
    NOTE: Custom values are not supported, as this would require a change to the Influent Transaction database schema.
  2. Edit the defaultEndDate property to specify the last date (MMM D, YYYY) in the range you selected.

Cards

In the Influent workspace, the cards that represent the accounts in your transaction and entity data display a set of icons that indicate key account attributes.

A set of default icons are available for your use in the Aperture JS project (aperture-icons/src/main/resources/oculus/aperture/icons/hscb/entity/actor/).

To edit which fields and icons are displayed on cards
  1. In your client-config.js file, edit the iconMap property to include icon mappings for each of the FL_PropertyTag names that correspond to the attributes you want to display.
  2. For each mapping, create cases for all of the possible values for the corresponding field. At a minimum, each case requires:
    Property Description
    title Name that appears in a tooltip when the user hovers the mouse over the icon
    icon A default Aperture JS icon:
    1. Specify the location of the icon by setting the type to the name of its parent folder in the aperture-icons/src/main/resources/oculus/aperture/icons/hscb/ folder of the Aperture JS project.
    2. If the specified folder contains multiple icons, use the attributes to indicate the subfolder in which the icon is found and pass in its name.
    url Location of a custom image:
    1. Copy your custom images to your project's src/main/webapp/img/ folder.
    2. Set the url to 'img/file-name.png'.
  3. For each mapping, edit the limit property to specify the maximum number of icons of a particular type that can appear on a card.
  4. Edit the iconOrder to specify the order in which icons should be displayed. Make sure you enter all the FL_PropertyTag names you listed in the iconMap property.

    iconOrder : ['TYPE', 'GEO', 'STATUS', 'WARNING'],
    
  5. Save the client-config.js file.

Examples

The following example from the Kiva application illustrates how to use default Aperture JS icons to indicate to which of the three types (lenders, partners or borrowers) an account belongs.

TYPE : {
    map : function(name, value) {
        switch (value) {
            case 'lender':
                return {
                    title: 'lender',
                    icon: {type: 'Person', 
                           attributes: {role: 'business'}}
                };
            case 'partner':
                return {
                    title: 'partner',
                    icon: {type: 'Organization',
                           attributes: {role: 'business'}}
                };
            case 'loan':
                return {
                    title: 'borrower / loan',
                    icon: {type: 'Person'}
                };
        }
    },
    limit : 1
},

This example from the Bitcoin application illustrates how to use custom icons to quantify the number of transactions in which an account has participated.

STAT : {
    map : function (name, value) {
        switch (name) {
            case 'NumTransactions':
                if (value < 2360537) {
                    return {
                        title: value,
                        url: 'img/pulse-1.png'
                    };
                } else if (value >= 2360537 && value < 4721075) {
                    return {
                        title: value,
                        url: 'img/pulse-2.png'
                    };
                } else if (value >= 4721075 && value < 7081613) {
                    return {
                        title: value,
                        url: 'img/pulse-3.png'
                    };
                } else if (value >= 7081613 && value < 9442151) {
                    return {
                        title: value,
                        url: 'img/pulse-4.png'
                    };
                }

Next Steps

For information on building your custom project and deploying it to a web server, see the Deployment topic.

For more information on advanced client settings, see the Client Settings reference topic.