FormPopup

FormPopup a component for additional field checks in popup and the ability to add information inside the popup.

Basics

Live Sample · GitHub

How does it look?

How to add?

Example

Step1 Add type "FormPopup" to BaseFieldExtractor.

@Override
public List<String> getSupportedTypes() {
    return Lists.newArrayList(
            "Funnel",
            "RingProgress",
            "DashboardList",
            "FormPopup"
    );
}

Step2 Add file "ActionsExt".

@UtilityClass
public class ActionsExt {

    public static PreAction confirmWithCustomWidget(@Nullable String message, @Nullable String widget, @Nullable String yesButton, @Nullable String noButton) {
        Map<String, String> customParameters = new HashMap<>();
        customParameters.put("subtype", "confirmWithCustomWidget");
        if (widget != null) {
            customParameters.put("widget", widget);
        }
        if (yesButton != null) {
            customParameters.put("yesText", yesButton);
        }
        if (noButton != null) {
            customParameters.put("noText", noButton);
        }
        return PreAction.custom(message, customParameters);
    }

}

Step3 Add a button "save-send" that raises the widget Popup

{
  "name": "MyExampleFormButton",
  "title": "",
  "type": "Form",
  "bc": "myExampleBc",
  "fields": [
    {
      "label": "Custom Field",
      "key": "customField",
      "type": "input"
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        }
      ]
    },
    "actionGroups": {
      "include": [
        "save-send"
      ]
    }
  }
}

Step4 Add widget with type FormPopup

{
  "name": "MyExampleFormpopup",
  "title": "Form widget",
  "type": "FormPopup",
  "bc": "myExampleBc",
  "fields": [
    {
      "label": "Сustom Field",
      "key": "customField",
      "type": "hint"
    },
    {
      "label": "Сustom Field",
      "key": "customField",
      "type": "input"
    }
  ],
  "options": {
    "layout": {
      "rows": [
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        },
        {
          "cols": [
            {
              "fieldKey": "customField",
              "span": 12
            }
          ]
        }
      ]
    }
  }
}

Step5 Add widget FormPopup on view

{
  "name": "myexampleformpopup",
  "title": "My Example Form",
  "template": "DashboardView",
  "url": "/screen/myexample/view/myexampleformpopup",
  "widgets": [
    {
      "widgetName": "MyExampleFormPopupInfoText",
      "position": 20,
      "gridWidth": 12
    },
    {
      "widgetName": "MyExampleFormpopup",
      "position": 40,
      "gridWidth": 12
    },
    {
      "widgetName": "MyExampleFormButton",
      "position": 50,
      "gridWidth": 12
    }
  ],
  "rolesAllowed": [
    "CXBOX_USER"
  ]
}

Step6 Add withPreAction with action confirmWithCommentwith

@Service
public class MyExampleService extends VersionAwareResponseService<MyExampleDTO, MyEntity> {

    private final MyEntityRepository repository;

    public MyExampleService(MyEntityRepository repository) {
        super(MyExampleDTO.class, MyEntity.class, null, MyExampleMeta.class);
        this.repository = repository;
    }

    @Override
    protected CreateResult<MyExampleDTO> doCreateEntity(MyEntity entity, BusinessComponent bc) {
        repository.save(entity);
        return new CreateResult<>(entityToDto(bc, entity));
    }

    @Override
    protected ActionResultDTO<MyExampleDTO> doUpdateEntity(MyEntity entity, MyExampleDTO data, BusinessComponent bc) {
        if (data.isFieldChanged(MyExampleDTO_.customField)) {
            entity.setCustomField(data.getCustomField());
        }
        if (data.isFieldChanged(MyExampleDTO_.customField)) {
            entity.setCustomField(data.getCustomField());
        }

        return new ActionResultDTO<>(entityToDto(bc, entity));
    }

    private static PreAction confirmWithComment(@NonNull String actionText) {
        return ActionsExt.confirmWithCustomWidget(actionText + "?", "MyExampleFormpopup", "Done", "Cancel");
    }

    @Override
    public Actions<MyExampleDTO> getActions() {
        return Actions.<MyExampleDTO>builder()
                .newAction()
                .action("save-send", "Save and send on approval")
                .withPreAction(confirmWithComment("Save and send on approval"))
                .invoker((bc, data) -> withApproval())
                .add()
                .build();
    }
    private ActionResultDTO<MyExampleDTO> withApproval() {
        return new ActionResultDTO<>();
    }

}