如何为控件添加图片类型的帮助文本

关键词：

控件，表单设计器控件，帮助文本

一、需求

    用户进行差旅报销等填单时需要提供填报指引，如发票上传、费用金额的填写等场景需要上传图片进行填报说明，如图1。 

图 1

二、思路与方案

2.1 分析思路

    标准产品提供的帮助文本可支持文本和表单两种类型（见图2），需求在填报指引添加图片等多媒体文件，因此选择用表单类型，可以在触发帮助文本时弹出二开自定义的表单显示需要展示填报指引详情。

图 2

2.2 实现方案

    首先，新建【填报指引】基础资料，将每个控件的填报指引信息存储到【填报指引】基础资料；

    然后，新建二开动态表单【填报指引详情】，用于展示某个控件的填报指引信息；

    最后，在业务单据，如【差旅报销单】上给需要设置填报指引的控件设置类型为“表单”的帮助文本并设置监听，在点击时打开所绑定的二开动态表单【填报指引详情】，并将被点击的控件标识传递到动态表单上。【填报指引详情】加载时根据被点击的控件标识从【填报指引】加载对应控件的填报指引数据显示到【填报指引详情】上。

三、实现过程

1.新建基础资料【填报指引】

    [编码]即为需添加填报指引控件的标识。添加Markdown控件并设置其控制模式为“编辑模式”，另添加多行文本字段[MardDown文本]用于保存时存储Markdown控件的编辑内容，如图3。

图 3

    执行保存操作前将Markdown控件的编辑内容存储到[MardDown文本]字段，在页面数据加载后将[MardDown文本]字段的数据赋值到Markdown控件展示。

关键代码：

public class HelpTextDataEdit extends AbstractBillPlugIn {
    @Override
    public void beforeDoOperation(BeforeDoOperationEventArgs args) {
        super.beforeDoOperation(args);
        FormOperate source = (FormOperate) args.getSource();
        String operateKey = source.getOperateKey();
        switch(operateKey) {
            case "save":
                //将Markdown控件编辑内容存储到数据库字段
                Markdown markdown = getControl("kded_markdownap");
                getModel().setValue("kded_markdowndata", markdown.getText());
                break;
            default:
                break;
        }
    }
    @Override
    public void afterLoadData(EventObject e) {
        super.afterLoadData(e);
        //将数据库字段存储的内容赋值到Markdown控件
        Markdown markdown = getControl("kded_markdownap");
        markdown.setText(getModel().getValue("kded_markdowndata").toString());
    }
}

2. 新建一个空白的动态表单【填报指引详情】kded_helpcontent

    添加Markdown控件并设置其控制模式为“预览模式”，如图4。

图 4

    页面加载时从FormShowParameter获取被点击控件标识，根据控件标识从步骤1的【填报指引】基础资料中获取该控件的填报指引详情数据，赋值到Markdown控件展示。

关键代码：

public class HasCreditInfoEdit extends AbstractFormPlugin {
    @Override
    public void afterCreateNewData(EventObject e) {
        super.afterCreateNewData(e);
        FormShowParameter formShowParameter = getView().getFormShowParameter();
        //FormShowParameter获取父页面被点击控件的标识
        Object ctlKey = formShowParameter.getCustomParam("ctlKey");
        if(ctlKey != null) {
            //根据控制标识从【填报指引】基础资料加载填报指引详情
            QFilter filter = new QFilter("number", QCP.equals, ctlKey.toString());
            DynamicObject helpTextData = QueryServiceHelper.queryOne("kded_helptextdata", "kded_markdowndata", filter.toArray());
            if(helpTextData != null) {
                //将填报指引详情内容赋值到Markdown控件展示
                Markdown markdown = getControl("kded_markdownap");
                markdown.setText(helpTextData.getString("kded_markdowndata"));
            }
        }
    }
}

3. 需要设置填报指引的控件设置“表单”类型的帮助文本并绑定表单号为步骤2的【填报指引详情】kded_helpcontent，如图5。

图 5

    给该控件添加TipsListener，在展示帮助文本之前将该控件的标识通过FormShowParamter传递给子页面用于获取填报指引详情数据。

关键代码：

public class TripReimburseBillEdit extends AbstractBillPlugIn implements TipsListener {
    @Override
    public void registerListener(EventObject e) {
        super.registerListener(e);
        FieldEdit fieldEdit = getControl("kded_hascreditinfo");
        fieldEdit.addTipsListener(this);
    }
     
    @Override
    public void beforeShowTips(BeforeShowTipsEvent evt) {
        Control source = (FieldEdit) evt.getSource();
        FormShowParameter formshowParameter = evt.getFormshowParameter();
        if(formshowParameter == null) {
            formshowParameter = new FormShowParameter();
        }
        //将点击控件标识传递给子页面用于获取填报指引详情数据
        formshowParameter.setCustomParam("ctlKey", source.getKey());
        evt.setFormshowParameter(formshowParameter);
    }
     
    @Override
    public void afterShowTips(AfterShowTipsEvent evt) {
    }
}

四、效果图

1. 维护【填报指引】数据

图 6

2. 点击帮助文本查看效果 

图 7

五、开发环境版本

COSMICV4.0.014.0

六、参考资料

【开发平台】指导手册

学习成长中心

七、附件