Add description fields

You may need to change the input specification by adding new fields to it. For example, if the location is far away or difficult to find, you can add a field for describing the location in detail. Or you can provide any other additional information that is needed in each task.

What it looks like

For your convenience, here is ready-made code for the “Monitoring field objects” template with two new input fields added. Use it to check your own code. You can find our additions to the code by searching for the word “customization”.

Ready-made code

Now let's see how to add these fields manually.

Editing the input specification

Add two new strings to the input data specification:

new_input_1 — The first string with new input data.

new_input_2 — The second string with new input data.

Editing HTML

  1. The HTML code consists of blocks describing various interface elements. Each block may contain other blocks within it. There may be several nesting levels. For example, the block with a response button description contains other blocks with input fields. Each field contains other elements, such as a title and a comment field.

    Each block looks like this:

    <div class="block_name">
    <!-- code for the block that may contain nested blocks -->
    ...
    </div>
  2. Find the info block responsible for displaying the input specification. It contains the info__block blocks that describe individual fields within the input specification. Paste the following code after the required field:

    <div class="info__block">
    <div class="info__title">
    {{texts.new_input_1__title}}
    </div>
    <div class="info__content">
    {{new_input_1}}
    </div>
    </div>
    <div class="info__block">
    <div class="info__title">
    {{texts.new_input_2__title}}
    </div>
    <div class="info__content">
    {{new_input_2}}
    </div>
    </div>

    This code places the new input fields one after another both in the Toloker mode and in the acceptance mode.

  3. There is also a second option when two fields are displayed one after another for the Toloker, and next to each other for the requester.

    In the info block, find the info__review block that contains several info__review-block blocks. After the desired info__review-block block, insert the blocks with new input fields:

    <!-- In one line in acceptance mode -->
    <div class="info__review-block">
    <div class="info__title">
    {{texts.new_input_1__title}}
    </div>
    <div class="info__content">
    {{new_input_1}}
    </div>
    </div>
    <div class="info__review-block">
    <div class="info__title">
    {{texts.new_input_2__title}}
    </div>
    <div class="info__content">
    {{new_input_2}}
    </div>
    </div>

    In the info block, find the info__block blocks between the strings {{else}} and {{/if}}. After the desired info__review-block block, insert the blocks with new input fields:

    <!-- One after another in Toloker mode -->
    <div class="info__block">
    <div class="info__title">
    {{texts.new_input_1__title}}
    </div>
    <div class="info__content">
    {{new_input_1}}
    </div>
    </div>
    <div class="info__block">
    <div class="info__title">
    {{texts.new_input_2__title}}
    </div>
    <div class="info__content">
    {{new_input_2}}
    </div>
    </div>

Editing JS

  1. The JS code consists of blocks describing various interface elements. These blocks can be nested (buttons contain a set of fields, fields contain a set of elements, and so on). Each block is enclosed in curly brackets.

    The elements are described as follows:

    'property': 'value'

    The value can also consist of several properties, in which case it is enclosed in curly brackets and forms the next level of nesting.

  2. The texts constant at the very beginning of the file stores all interface texts. Add the titles of the new fields to it:

    'new_input_1__title': 'Input field 1:',
    'new_input_2__title': 'Input field 2:',
Contact support

Last updated: February 14, 2023

Tutorials
List of examples
Images
Video
Audio
Texts
Data enrichment
Surveys
Field tasks
Help and support
FAQTroubleshootingSupportGlossary