问题反馈

如有问题可通过微信公众号“假装正经的程序员”反馈

Flowable-UI是什么

Flowable-UI是flowable自带的一套供开发人员体验的系统，它通过后台的UI建模，让开发人员了解Flowable的工作流程，同时它部署简单，只需要将对应的war包丢到Tomcat后启动即可。

它主要提供如下功能：

  • Flowable Admin: 管理应用。让具有管理员权限的用户可以查询 BPMN、DMN、Form 及 Content 引擎，并提供了许多选项用于修改流程实例、任务、作业等。管理应用通过 REST API 连接至引擎，并与 Flowable Task 应用及 Flowable REST 应用一同部署。
  • Flowable IDM: 身份管理应用。为所有 Flowable UI 应用提供单点登录认证功能，并且为拥有 IDM 管理员权限的用户提供了管理用户、组与权限的功能。
  • Flowable Modeler: 建模器应用。让具有建模权限的用户可以创建流程模型、表单、选择表与应用定义。
  • Flowable Task: 任务应用。提供了启动流程实例、编辑任务表单、完成任务，以及查询流程实例与任务的功能。

如何安装启动

1.下载地址（自行选择版本）：https://github.com/flowable/flowable-engine/releases

2.解压之后会获取到flowable-rest.war和flowable-ui.war

3.将上述两个war包丢进Tomcat的webapps目录下，启动Tomcat

4.出现如下，即表示启动成功

登录

输入http://localhost:8080/flowable-ui进行体验

用户名：admin

密码：test

创建表单

设置表单key

创建好表单名和表单key后会进入到如下界面：

将左侧组件拖入到右侧后会出现如下，通过右下角的笔头可以编辑组件显式内容

自定义组件id

如果需要通过该组件的值做判断或者展示，需要将id设置成自己业务相关内容，如流程中可能通过请假天数的值来判断走哪个流程，这个时候就可用${num>3}来做判断

保存表单，创建完毕

创建用户

创建用户组

创建用户

添加组成员

注意：新增用户后可能存在一定的延迟，另外此处的搜索要搜索的是用户的名称，否则可能搜索不到

授予权限

注意：如果新增的用户没有授予权限，那么该用户登录后会什么都不展示

这个时候登录lisi的账户就会出现任务应用程序了

定义流程

创建、导入流程

支持创建和导入已有流程

绘制流程

左侧流程组件可按需拖入，

详细组件内容后面会出专门的文章说明

节点关联表单

选择之前绘制的表单

分配审批用户

可以选择单个用户，也可以选择按组分配，这些都源于我们之前创建的用户

设置流程条件

流程校验

绘制完毕后，可以通过自带的流程校验器来进行流程的准确性校验

这个错误的意思是连接目标无效

连线时需要连接到对应的小红点上，经过排查发现上述错误是因为此处之前没有连上小红点

保存模型

导出BPMN文件

BPMN内容

<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://www.flowable.org/processdef" exporter="Flowable Open Source Modeler" exporterVersion="6.7.2">
  <process id="my_holiday" name="MyHoliday" isExecutable="true">
    <startEvent id="startEvent1" name="开始" flowable:formKey="1" flowable:formFieldValidation="true"></startEvent>
    <userTask id="sid-90A1EE7D-0917-45B6-82DF-824DCAC24745" name="部门主管审批" flowable:candidateUsers="zhangsan,lisi" flowable:formKey="2" flowable:formFieldValidation="true">
      <extensionElements>
        <modeler:user-info-email-zhangsan xmlns:modeler="http://flowable.org/modeler"><![CDATA[zhangsan@qq.com]]></modeler:user-info-email-zhangsan>
        <modeler:user-info-firstname-zhangsan xmlns:modeler="http://flowable.org/modeler"><![CDATA[zhangsan]]></modeler:user-info-firstname-zhangsan>
        <modeler:user-info-firstname-lisi xmlns:modeler="http://flowable.org/modeler"><![CDATA[lisi]]></modeler:user-info-firstname-lisi>
        <modeler:activiti-idm-candidate-user xmlns:modeler="http://flowable.org/modeler"><![CDATA[true]]></modeler:activiti-idm-candidate-user>
        <modeler:initiator-can-complete xmlns:modeler="http://flowable.org/modeler"><![CDATA[false]]></modeler:initiator-can-complete>
      </extensionElements>
    </userTask>
    <userTask id="sid-36EFE8F0-BA14-429C-8B74-C3B1065AEC41" name="申请" flowable:assignee="admin" flowable:formKey="1" flowable:formFieldValidation="true">
      <extensionElements>
        <modeler:activiti-idm-assignee xmlns:modeler="http://flowable.org/modeler"><![CDATA[true]]></modeler:activiti-idm-assignee>
        <modeler:assignee-info-email xmlns:modeler="http://flowable.org/modeler"><![CDATA[test-admin@example-domain.tld]]></modeler:assignee-info-email>
        <modeler:assignee-info-firstname xmlns:modeler="http://flowable.org/modeler"><![CDATA[Test]]></modeler:assignee-info-firstname>
        <modeler:assignee-info-lastname xmlns:modeler="http://flowable.org/modeler"><![CDATA[Administrator]]></modeler:assignee-info-lastname>
        <modeler:initiator-can-complete xmlns:modeler="http://flowable.org/modeler"><![CDATA[false]]></modeler:initiator-can-complete>
      </extensionElements>
    </userTask>
    <sequenceFlow id="sid-C3388D53-833B-4D07-A5FC-B2286032FC41" sourceRef="startEvent1" targetRef="sid-36EFE8F0-BA14-429C-8B74-C3B1065AEC41"></sequenceFlow>
    <userTask id="sid-0E218782-7FE2-4693-8E01-29C4FB882EED" name="主管审批" flowable:candidateGroups="test_group" flowable:formKey="2" flowable:formFieldValidation="true">
      <extensionElements>
        <modeler:group-info-name-test_group xmlns:modeler="http://flowable.org/modeler"><![CDATA[测试组]]></modeler:group-info-name-test_group>
        <modeler:activiti-idm-candidate-group xmlns:modeler="http://flowable.org/modeler"><![CDATA[true]]></modeler:activiti-idm-candidate-group>
        <modeler:initiator-can-complete xmlns:modeler="http://flowable.org/modeler"><![CDATA[false]]></modeler:initiator-can-complete>
      </extensionElements>
    </userTask>
    <userTask id="sid-90C02DC7-900A-477A-BB79-B525966EC27B" name="经理审批" flowable:assignee="wangwu" flowable:formKey="2" flowable:formFieldValidation="true">
      <extensionElements>
        <modeler:activiti-idm-assignee xmlns:modeler="http://flowable.org/modeler"><![CDATA[true]]></modeler:activiti-idm-assignee>
        <modeler:assignee-info-email xmlns:modeler="http://flowable.org/modeler"><![CDATA[wangwu@qq.com]]></modeler:assignee-info-email>
        <modeler:assignee-info-firstname xmlns:modeler="http://flowable.org/modeler"><![CDATA[wangwu]]></modeler:assignee-info-firstname>
        <modeler:initiator-can-complete xmlns:modeler="http://flowable.org/modeler"><![CDATA[false]]></modeler:initiator-can-complete>
      </extensionElements>
    </userTask>
    <endEvent id="sid-5F37DD3B-A592-4F3A-A003-C3674700DEC9"></endEvent>
    <sequenceFlow id="sid-6BD1B471-E03D-4508-AB82-A4F5D2FA09EB" name="不通过" sourceRef="sid-0E218782-7FE2-4693-8E01-29C4FB882EED" targetRef="sid-36EFE8F0-BA14-429C-8B74-C3B1065AEC41">
      <conditionExpression xsi:type="tFormalExpression"><![CDATA[${approve=='拒绝'}]]></conditionExpression>
    </sequenceFlow>
    <exclusiveGateway id="sid-9FBE069F-C126-4897-B91C-E1A9531A763D"></exclusiveGateway>
    <sequenceFlow id="sid-440D1438-7682-4E99-B3A0-1AB02D4C0DA3" name="通过" sourceRef="sid-0E218782-7FE2-4693-8E01-29C4FB882EED" targetRef="sid-5F37DD3B-A592-4F3A-A003-C3674700DEC9">
      <conditionExpression xsi:type="tFormalExpression"><![CDATA[${approve=='同意'}]]></conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="sid-D7A6B9F8-E554-49A5-AFDA-03F079D7FFA3" name="通过" sourceRef="sid-90C02DC7-900A-477A-BB79-B525966EC27B" targetRef="sid-5F37DD3B-A592-4F3A-A003-C3674700DEC9">
      <conditionExpression xsi:type="tFormalExpression"><![CDATA[${approve=='同意'}]]></conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="sid-3C1B19B5-F174-4FE4-9B55-DBE84FC23CDD" name="通过" sourceRef="sid-90A1EE7D-0917-45B6-82DF-824DCAC24745" targetRef="sid-90C02DC7-900A-477A-BB79-B525966EC27B">
      <conditionExpression xsi:type="tFormalExpression"><![CDATA[${approve=='同意'}]]></conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="sid-B2E18218-DB07-4079-A55E-60B581457B3C" name="不通过" sourceRef="sid-90C02DC7-900A-477A-BB79-B525966EC27B" targetRef="sid-36EFE8F0-BA14-429C-8B74-C3B1065AEC41">
      <conditionExpression xsi:type="tFormalExpression"><![CDATA[${approve=='拒绝'}]]></conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="sid-7F7F0C70-725F-4080-9865-C76B2DC28968" name="不通过" sourceRef="sid-90A1EE7D-0917-45B6-82DF-824DCAC24745" targetRef="sid-36EFE8F0-BA14-429C-8B74-C3B1065AEC41">
      <conditionExpression xsi:type="tFormalExpression"><![CDATA[${approve=='拒绝'}]]></conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="sid-F419372D-19E2-4912-9DC8-756290B9FC83" sourceRef="sid-36EFE8F0-BA14-429C-8B74-C3B1065AEC41" targetRef="sid-9FBE069F-C126-4897-B91C-E1A9531A763D"></sequenceFlow>
    <sequenceFlow id="sid-48F90825-6079-49E1-991A-1FE011D8755B" name="大于3天" sourceRef="sid-9FBE069F-C126-4897-B91C-E1A9531A763D" targetRef="sid-90A1EE7D-0917-45B6-82DF-824DCAC24745">
      <conditionExpression xsi:type="tFormalExpression"><![CDATA[${num>3}]]></conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="sid-B12FA2F5-CE8F-44AE-9E11-5C711F5DF114" name="小于等于3天" sourceRef="sid-9FBE069F-C126-4897-B91C-E1A9531A763D" targetRef="sid-0E218782-7FE2-4693-8E01-29C4FB882EED">
      <conditionExpression xsi:type="tFormalExpression"><![CDATA[${num<=3}]]></conditionExpression>
    </sequenceFlow>
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_my_holiday">
    <bpmndi:BPMNPlane bpmnElement="my_holiday" id="BPMNPlane_my_holiday">
      <bpmndi:BPMNShape bpmnElement="startEvent1" id="BPMNShape_startEvent1">
        <omgdc:Bounds height="30.0" width="30.0" x="105.0" y="160.0"></omgdc:Bounds>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-90A1EE7D-0917-45B6-82DF-824DCAC24745" id="BPMNShape_sid-90A1EE7D-0917-45B6-82DF-824DCAC24745">
        <omgdc:Bounds height="80.0" width="100.0" x="554.9999917298557" y="132.9999980181456"></omgdc:Bounds>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-36EFE8F0-BA14-429C-8B74-C3B1065AEC41" id="BPMNShape_sid-36EFE8F0-BA14-429C-8B74-C3B1065AEC41">
        <omgdc:Bounds height="80.0" width="100.0" x="210.0" y="135.0"></omgdc:Bounds>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-0E218782-7FE2-4693-8E01-29C4FB882EED" id="BPMNShape_sid-0E218782-7FE2-4693-8E01-29C4FB882EED">
        <omgdc:Bounds height="80.0" width="100.0" x="555.0" y="285.0"></omgdc:Bounds>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-90C02DC7-900A-477A-BB79-B525966EC27B" id="BPMNShape_sid-90C02DC7-900A-477A-BB79-B525966EC27B">
        <omgdc:Bounds height="80.0" width="100.0" x="719.9999785423283" y="132.9999960362912"></omgdc:Bounds>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-5F37DD3B-A592-4F3A-A003-C3674700DEC9" id="BPMNShape_sid-5F37DD3B-A592-4F3A-A003-C3674700DEC9">
        <omgdc:Bounds height="28.0" width="28.0" x="884.9999868124726" y="158.9999976307154"></omgdc:Bounds>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape bpmnElement="sid-9FBE069F-C126-4897-B91C-E1A9531A763D" id="BPMNShape_sid-9FBE069F-C126-4897-B91C-E1A9531A763D">
        <omgdc:Bounds height="40.0" width="40.0" x="418.5" y="153.0"></omgdc:Bounds>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge bpmnElement="sid-C3388D53-833B-4D07-A5FC-B2286032FC41" id="BPMNEdge_sid-C3388D53-833B-4D07-A5FC-B2286032FC41" flowable:sourceDockerX="15.0" flowable:sourceDockerY="15.0" flowable:targetDockerX="50.0" flowable:targetDockerY="40.0">
        <omgdi:waypoint x="134.9499990675947" y="175.0"></omgdi:waypoint>
        <omgdi:waypoint x="210.0" y="175.0"></omgdi:waypoint>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-6BD1B471-E03D-4508-AB82-A4F5D2FA09EB" id="BPMNEdge_sid-6BD1B471-E03D-4508-AB82-A4F5D2FA09EB" flowable:sourceDockerX="50.0" flowable:sourceDockerY="40.0" flowable:targetDockerX="50.0" flowable:targetDockerY="40.0">
        <omgdi:waypoint x="605.0" y="364.95000000000005"></omgdi:waypoint>
        <omgdi:waypoint x="605.0" y="396.0"></omgdi:waypoint>
        <omgdi:waypoint x="260.0" y="396.0"></omgdi:waypoint>
        <omgdi:waypoint x="260.0" y="214.95000000000002"></omgdi:waypoint>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-D7A6B9F8-E554-49A5-AFDA-03F079D7FFA3" id="BPMNEdge_sid-D7A6B9F8-E554-49A5-AFDA-03F079D7FFA3" flowable:sourceDockerX="50.0" flowable:sourceDockerY="40.0" flowable:targetDockerX="14.0" flowable:targetDockerY="14.0">
        <omgdi:waypoint x="819.9499779958626" y="172.99999665366704"></omgdi:waypoint>
        <omgdi:waypoint x="884.9999867883963" y="172.99999745767713"></omgdi:waypoint>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-7F7F0C70-725F-4080-9865-C76B2DC28968" id="BPMNEdge_sid-7F7F0C70-725F-4080-9865-C76B2DC28968" flowable:sourceDockerX="50.0" flowable:sourceDockerY="40.0" flowable:targetDockerX="75.0" flowable:targetDockerY="1.0">
        <omgdi:waypoint x="604.4117612833849" y="132.9999980181456"></omgdi:waypoint>
        <omgdi:waypoint x="604.0" y="105.0"></omgdi:waypoint>
        <omgdi:waypoint x="283.5" y="105.0"></omgdi:waypoint>
        <omgdi:waypoint x="284.9516129032258" y="135.0"></omgdi:waypoint>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-48F90825-6079-49E1-991A-1FE011D8755B" id="BPMNEdge_sid-48F90825-6079-49E1-991A-1FE011D8755B" flowable:sourceDockerX="20.0" flowable:sourceDockerY="20.0" flowable:targetDockerX="50.0" flowable:targetDockerY="40.0">
        <omgdi:waypoint x="458.4440128419785" y="172.99999976193936"></omgdi:waypoint>
        <omgdi:waypoint x="554.9999916606904" y="172.99999861270194"></omgdi:waypoint>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-F419372D-19E2-4912-9DC8-756290B9FC83" id="BPMNEdge_sid-F419372D-19E2-4912-9DC8-756290B9FC83" flowable:sourceDockerX="50.0" flowable:sourceDockerY="40.0" flowable:targetDockerX="20.0" flowable:targetDockerY="20.0">
        <omgdi:waypoint x="309.9499999999995" y="174.43977591036415"></omgdi:waypoint>
        <omgdi:waypoint x="418.72160664819944" y="173.22105263157894"></omgdi:waypoint>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-B12FA2F5-CE8F-44AE-9E11-5C711F5DF114" id="BPMNEdge_sid-B12FA2F5-CE8F-44AE-9E11-5C711F5DF114" flowable:sourceDockerX="20.0" flowable:sourceDockerY="20.0" flowable:targetDockerX="50.0" flowable:targetDockerY="40.0">
        <omgdi:waypoint x="438.56540983606556" y="192.87809633027524"></omgdi:waypoint>
        <omgdi:waypoint x="439.0" y="325.0"></omgdi:waypoint>
        <omgdi:waypoint x="555.0" y="325.0"></omgdi:waypoint>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-B2E18218-DB07-4079-A55E-60B581457B3C" id="BPMNEdge_sid-B2E18218-DB07-4079-A55E-60B581457B3C" flowable:sourceDockerX="50.0" flowable:sourceDockerY="40.0" flowable:targetDockerX="50.0" flowable:targetDockerY="40.0">
        <omgdi:waypoint x="769.5604275155658" y="132.9999960362912"></omgdi:waypoint>
        <omgdi:waypoint x="769.0" y="82.0"></omgdi:waypoint>
        <omgdi:waypoint x="260.0" y="82.0"></omgdi:waypoint>
        <omgdi:waypoint x="260.0" y="135.0"></omgdi:waypoint>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-3C1B19B5-F174-4FE4-9B55-DBE84FC23CDD" id="BPMNEdge_sid-3C1B19B5-F174-4FE4-9B55-DBE84FC23CDD" flowable:sourceDockerX="50.0" flowable:sourceDockerY="40.0" flowable:targetDockerX="50.0" flowable:targetDockerY="40.0">
        <omgdi:waypoint x="654.9499897468008" y="172.9999974175836"></omgdi:waypoint>
        <omgdi:waypoint x="719.9999785423283" y="172.99999663625266"></omgdi:waypoint>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge bpmnElement="sid-440D1438-7682-4E99-B3A0-1AB02D4C0DA3" id="BPMNEdge_sid-440D1438-7682-4E99-B3A0-1AB02D4C0DA3" flowable:sourceDockerX="50.0" flowable:sourceDockerY="40.0" flowable:targetDockerX="14.0" flowable:targetDockerY="14.0">
        <omgdi:waypoint x="654.9499999999999" y="325.0"></omgdi:waypoint>
        <omgdi:waypoint x="898.0" y="325.0"></omgdi:waypoint>
        <omgdi:waypoint x="898.9078847167215" y="186.94970208387926"></omgdi:waypoint>
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>

发布流程

创建应用程序

关联流程

发布流程

保存好上述应用程序后，点击该应用程序进行发布

发起流程

启动流程

# ui # java
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

OpenLoong项目通过技术监督委员会（TOC）评审

OpenLoong项目通过技术监督委员会（TOC）评审

avatar 开放原子开发者工作坊

开发者谈开源：KWDB开源数据库的未来路径与生态构建实践

开发者谈开源：KWDB开源数据库的未来路径与生态构建实践

avatar 开放原子开发者工作坊

开发者谈开源：洞悉协作创新背后的机遇与挑战

近日，在2024开放原子开发者大会暨首届开源技术学术大会开幕式上，开放原子开源基金会与openKylin、EasyAda、KWDB开源项目举行捐赠签约仪式。 一场捐赠签约仪式，让三个开源项目及其背后的开发者们受到瞩目。本次，我们与“龘”（EasyAda）核心维护者王伶卓开启了对话。

avatar 开放原子开发者工作坊