Investments configuration file

NOTE: This file is temporary valid, until such object will be saved in database

In this file we parse the fields that are received from the API and those that will be able to be displayed in the application. Currently, this configuration is a javascript file, since it accepts function type properties to process the data in a personalized way.

• title
  • id: String. Name of the field that will be the title
• description
  • id: String. Name of the field that will make a description
• phases
  • id: String. Name of the field through which each available phase will be broken down
• location
  • id: String. Name of the field that contains the geographic data
  • center: Array [Number, Number]. [lat, lng], where the center of the map will be located
  • maxZoom: Number. Maximum zoom available for the map
  • minZoom: Number. Minimum zoom available for the map
• displayGalleryFieldTags: Boolean. Display the field names in the gallery cards. default: true

The following fields are arrays that contain objects with a structure similar to those shown above:

• availableFilters: Array. Indicate what filters the site has available
• availableGalleryFields: Array. Show which fields you want to show on the map and gallery cards
• availableTableFields: Array. Show which fields you want to display in the table view
• availableProjectFields: Array. It shows which fields you want to show in the individual project file

The previously defined arrays accept objects with the following properties:

• id: String. Like the first four properties, it contains the name of the field we want to display
• composite: Optional. Boolean true if the field requires an special configuration. See composite field
• type: Optional. String See types
• sort: Optional. String asc or desc. Only valid for table view.

Date range

To handle dates on the same object, we must combine those fields that serve as a range of dates, that is, which will be the starting date, and which the ending. To do this, we first declare the special id called daterange, like this:

• id: "daterange"
• startKey: String. Name of the field that is the initial date
• endKey: String. Name of the field that is the end date

Types

Special fields that have a specific format

• separator: Add a <hr /> between the listed items
• highlight: Highlights one field above the others
• link: Wraps the value with an anchor
• table: Contains a nested table. See special fields
• icon: Contains an icon and a link. See special fields

Special fieldtypes

These fields also require adding the corresponding properties:

• table:
  • columns: Array [Object, ...]. It contains the fields that will exert columns. Object refers to the same type of object that we can add in the previous arrays
• icon:
  • title: String. Field containing the name of the document
  • href: String. Field containing the destination url
  • name: String. FontAwesome icon name to display

Composite field

This special field will create a text from other field values. To achieve it, we set the following:

• template: This is the final string before interpolation
• params: Array [Object, ...]. Each parameter setting.
  • key: The param-name in the template.
  • value: The field who matches, to replace the param with its value.
  • pattern: String regex. If we wanna get only some part from the field, we set a regexp with a Capturing group. Such group will be the value shown.

Complete example of configuration file

In the following example you can see how to apply the different combinations for the different fields

JavaScript

{
  title: {
    id: "title"
  },
  description: {
    id: "desc"
  },
  phases: {
    id: "fases-proyecto"
  },
  location: {
    id: "geom",
    center: [0, 0],
    minZoom: 10,
    maxZoom: 18
  },
  availableFilters: [
    {
      id: "daterange",
      startKey: "fecha-inicial",
      endKey: "fecha-final"
    },
    {
      id: "tipo"
    }
  ],
  availableGalleryFields: [
    {
      id: "fecha-final"
    },
    {
      id: "importe",
      type: "highlight"
    },
  ],
  availableTableFields: [
    {
      id: "nombre"
    },
    {
      id: "import"
    }
  ],
  availableProjectFields: [
    {
      id: "notas"
    },
    {
      id: "multiple-valor"
    },
    {
      id: "budget",
      type: "link",
      composite: true,
      template: "/path/to/resource/:BUDGETLINE/:YEAR/etc",
      params: [{
        key: "BUDGETLINE",
        value: "some-valid-field",
        pattern: "[\\S]+\\.(\\d+)\\w\\.[\\S]+"
      },{
        key: "YEAR",
        value: "another-field"
      }]
    },
    {
      id: "link",
      icon: {
        title: "title-field",
        href: "url-field",
        name: "file"
      }
    },
    {
      type: "separator"
    },
    {
      id: "importe"
    },
    {
      id: "campo_tabla",
      type: "table",
      table: {
        columns: [{
          id: "nombre"
        }, {
          id: "valor"
        }]
      }
    }
  ]
}