Customizing the interface

DMF 2104** CUSTOMER PORTAL CUSTOMIZATION *

The Employee, CRM and Manager modules can be customized in several ways to suit the specific needs of each company, but also of each employee.

In the forms used to create or modify a time entry, a schedule, a leave request, a custom request or a service, the fields can be customized by reorganizing them, by making some fields required, etc.

To customize a form, open the desired one and click on Customize form.

Note

The service form can also be customized from Manager > Validations > Services.

1 From the form's customization interface, click on a dotted frame in the Form section. Each dotted frame represents a field or a section in the relevant form.

The options available to customize the selected item are displayed in the Edition section.

2 For each frame:
  • Click on Add field to select a field to be added, then click on Validate.
  • Click on Delete to delete the selected item from the form.
  • Modify the customization fields then click on Validate.
3 Click on Save to apply the customization.

Click on Delete customization to go back to the standard form, without any customization.

From the form's customization interface, it is possible to use JavaScript code to add additional customization options. Fill in the JavaScript code in the Additional javascript code field then click on Save.

Writing the JavaScript code

Important

The first line of code must be: /*<![CDATA[*/

The last line of code must be: /*]]>*/

The Employee module uses the jQuery library to easily handle fields in a form.

Examples

$('#demandeInterneForm_nomAppel').val('TO BE FILLED IN');

Automatically fills in the TO BE FILLED IN value in the Title of a custom request.

$('#demandeInterneForm_nomAppel').prop('readonly', true);

Turns the Title of a custom request into a read-only field.

Retrieving the ID of a field to customize it

Each field has a unique ID that can be used with the # character. $('#XXXX') is used to customize the field with the XXXX ID.

To retrieve the ID of a field, right-click on the field and select the option to display the source code. The name of this option depends on the web browser used, for example Inspect for Google Chrome or Safari, or Inspect Element for Mozilla Firefox. The HTML tag of the field is highlighted and the ID is the id attribute.

Example

If I inspect the source code of the Customer field in a custom request, this is what I see:

<input type="text" class="form-control quickfield-input" id="demandeInterneForm_nomAppelClient" autocomplete="off" name="nomAppelClient" data-original-title="" title="">

In this case, the field ID is demandeInterneForm_nomAppelClient.

In the opportunity, contact, prospect and customer record sheets, it is possible to customize all the fields displayed and the ones that are required. Additionally, when an opportunity moves from one stage to another, the fields that must be filled in to move to the new stage can be customized.

Note

If a field is set up as required in the Desktop Application, it must be set up manually in the portal to also be required there.

By default, the fields displayed in the opportunity, contact, prospect and customer record sheets are the main fields used to create new items. However, all these fields can be customized: you can display or hide fields according to your needs, but you can also decide if a field is required or can be modified.

This customization is shared with all users of the same company. The company used for the customization is displayed at the top of the frame with all the fields.

When an opportunity moves to a new stage, it means it is progressing in the sales process. An opportunity that was just created will be added to the stage entered when creating the opportunity, or otherwise in the first sales stage. To show opportunities are progressing, they must be moved from stages to stages. The sales person assigned to the opportunity has to fill in pieces of information about the opportunity at each step, but this information can vary. That is why the fields that are required to move to a new stage can be customized.

Example

An opportunity is in the "Product demo" stage. The next stage is the "Negotiation" one. To move the opportunity to the negotiation stage, I must fill in fields regarding the business proposal: the actual proposal, the SIREN and SIRET numbers, and so on.

From the opportunity pipeline, locate the column of the stage you want to set up. This way, when a user moves an opportunity to this stage, the fields set up will have to be filled in.

1 To access the customization interface:
  • From an opportunity, contact, prospect or customer record sheet, click on at the top right of the field form.
  • From the opportunity pipeline, click on at the top of the column you want to set up.

The customization feature opens and displays two frames: the left frame includes the list of fields that are already displayed in the record sheet, and the right frame includes all the fields available and categorized.

2 In the Field library, search for the field you want to add, then drag and drop this field in the Drag and drop fields here frame. This frame is located at the top of the list of added fields, as well as at the bottom.

The field is added to the list of fields displayed in the record sheet.

Note

When a field is added, the list is not checked to make sure the field has not already been added. Therefore, there can be duplicates.

3 To set up the layout, open the Layout category in the Field library. Add a Title, Subtitle or Separator to set up the layout of the fields list. Make sure you modify the names for the titles and subtitles.

Note

The layout cannot be set up for stages.

4 Click on for the added field:
  • Check Required so the field must be filled in.
  • Check Read-only so the field cannot be modified.
  • In the Keyword code field, fill in the code of a keyword (only with the List of values type). This field is only displayed for standard fields (not for custom data) that are free-form. To specify a value, you will be able to choose from the list of values set up in the keyword from the Desktop Application.

Note

Keywords are defined from the setup of the Application Desktop, in the menu General setup > Special parameters > Keyword > Keyword.

5 To change the field's position, click on on the field's left then move it to the desired position.
6 Click on Save.

The customization is updated.

From the customization feature, click on to delete the field from the list or click on Delete all at the top to delete all custom fields at once.