PagePlug组件使用技巧（一）——Iframe组件开发日程管理功能

已于 2024-01-17 17:21:18 修改
阅读量1.2k 收藏 25
点赞数 24
文章标签： 低代码 javascript 前端 react 开源软件
于 2024-01-17 17:20:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AppsmithCN/article/details/135654077
版权

一、背景

PagePlug是Appsmith中国化项目，一款面向研发开发使用、开源的、前后端一体的低代码工具，拥有强大的可视化建模、数据库和API集成能力，目前已有将近超千家企业将PagePlug低代码开发工具融入内部研发体系，相较于传统的产研开发，使用PagePlug可大幅提升研发效率，节省项目迭代维护成本。更多介绍可点击下方文章查阅：

在企业复杂的业务场景中，往往会出现部分个性化的需求，无法通过现有组件去实现联动，这时候会涉及到两个方面的选择，一个是通过高代码进行组件开发补充对应的功能；另外一个，可以通过现有的Iframe组件，完成特定的UI设计、特殊的数据展示方式甚至其他个性化的功能 

本次案例分享一个通过Iframe组件实现日程管理功能和代码编辑器功能，使用fullcalendar.js库在Iframe组件中实现日程功能，示例json文件也已经上传到gitee、github的demo文件夹中

二、实战教程

本次案例开发比较简单，主要使用FullCalendar.js库及提供对应所需的数据格式内容（业务个性化需求都可以在PagePlug的Jsobject中自行编写代码实现）

因为要访问国外的网站，需要魔法🪄上网

2.1 拖入组件 

  • 可以在画布中先拖入一个Iframe组件，还有2个弹窗（Modal）组件，分别命名为：mdl_newEvent和mdl_selectedEvent

  • mdl_selectedEvent：如果点击的日程中有已存在的事件，该弹窗功能为显示对应的事件内容

  • mdl_newEvent：如果点击的日程没有存在事件，该弹窗功能为 新建日程

2.2 编写代码

在PagePlug中，对于业务的个性化需求，都可以在Jsobject中编写代码，最后绑定到组件上

  • 新建一个Js对象，例如命名为：sampleEvents，该样例数据用于日程功能中事件的显示

  • 贴上代码
export default {
	
	//fullcalendar expects data in this format. Map your data to these field names. 
	data: [
		{
			"title": "Tech Conference",
			"start": "2023-09-04T10:00:00-04:00",
			"end": "2023-09-04T17:00:00-04:00",
			"desc": "Join us for a tech conference.",
			"location": "https://zoom.us/join",
			"color": "red"
		},
		{
			"title": "Product Launch",
			"start": "2023-09-12T14:30:00-07:00",
			"end": "2023-09-12T16:00:00-07:00",
			"desc": "Exciting product launch event.",
			"location": "https://zoom.us/join",
			"color": "green"
		},
		{
			"title": "Webinar",
			"start": "2023-09-20T11:00:00-07:00",
			"allDay": true,
			"desc": "Interactive webinar on the latest web technologies.",
			"location": "123 Main St, Los Angeles, CA 90012"
		},
		{
			"title": "Startup Pitch",
			"start": "2023-09-25T15:00:00-05:00",
			"desc": "Startup pitch competition.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Workshop",
			"start": "2023-10-03T09:30:00-05:00",
			"desc": "Hands-on workshop for developers.",
			"location": "456 Elm St, Chicago, IL 60601"
		},
		{
			"title": "Networking Event",
			"start": "2023-10-12T18:00:00-04:00",
			"allDay": true,
			"desc": "Connect with professionals at our networking event.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Seminar",
			"start": "2023-10-21T13:30:00-05:00",
			"desc": "Informative seminar.",
			"location": "789 Oak St, Dallas, TX 75201"
		},
		{
			"title": "Hackathon",
			"start": "2023-11-02T10:00:00-07:00",
			"desc": "Join the coding challenge at our hackathon.",
			"location": "https://zoom.us/join",
			"color": "red"
		},
		{
			"title": "Panel Discussion",
			"start": "2023-11-15T16:00:00-05:00",
			"allDay": true,
			"desc": "Engage in a lively panel discussion.",
			"location": "890 Pine St, Miami, FL 33101"
		},
		{
			"title": "Workshop",
			"start": "2023-11-27T14:30:00-07:00",
			"desc": "Learn new skills at our workshop.",
			"location": "123 Birch St, Denver, CO 80202"
		},
		{
			"title": "Conference",
			"start": "2023-12-05T09:00:00-05:00",
			"allDay": true,
			"desc": "Annual conference.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Holiday Party",
			"start": "2023-12-20T19:00:00-08:00",
			"desc": "Celebrate the holidays at our party.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Seminar",
			"start": "2024-01-10T14:00:00-06:00",
			"desc": "Informative seminar.",
			"location": "456 Elm St, Houston, TX 77001"
		},
		{
			"title": "Conference",
			"start": "2024-01-25T09:30:00-05:00",
			"allDay": true,
			"desc": "Annual conference.",
			"location": "https://zoom.us/join",
			"color": "red"
		},
		{
			"title": "Workshop",
			"start": "2024-02-12T13:45:00-07:00",
			"desc": "Hands-on workshop for professionals.",
			"location": "123 Oak St, Seattle, WA 98101"
		},
		{
			"title": "Webinar",
			"start": "2024-03-05T16:30:00-05:00",
			"desc": "Interactive webinar on industry trends.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Startup Pitch",
			"start": "2024-03-20T11:15:00-04:00",
			"desc": "Startup pitch competition.",
			"location": "789 Pine St, San Diego, CA 92101"
		},
		{
			"title": "Hackathon",
			"start": "2024-04-07T10:30:00-07:00",
			"allDay": true,
			"desc": "Join the coding challenge at our hackathon.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Panel Discussion",
			"start": "2024-04-22T15:45:00-05:00",
			"desc": "Engage in a lively panel discussion.",
			"location": "890 Elm St, Boston, MA 02108"
		},
		{
			"title": "Networking Event",
			"start": "2024-05-15T18:00:00-04:00",
			"desc": "Connect with professionals at our networking event.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Workshop",
			"start": "2024-06-02T09:00:00-05:00",
			"allDay": true,
			"desc": "Learn new skills at our workshop.",
			"location": "123 Maple St, Austin, TX 78701"
		},
		{
			"title": "Conference",
			"start": "2024-06-18T14:00:00-07:00",
			"desc": "Annual conference.",
			"location": "https://zoom.us/join",
			"color": "red"
		},
		{
			"title": "Holiday Party",
			"start": "2024-07-05T18:30:00-04:00",
			"desc": "Celebrate the holidays at our party.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Seminar",
			"start": "2024-08-20T10:30:00-07:00",
			"desc": "Informative seminar.",
			"location": "456 Oak St, Chicago, IL 60601"
		},
		{
			"title": "Webinar",
			"start": "2024-09-10T16:00:00-05:00",
			"allDay": true,
			"desc": "Interactive webinar on industry trends.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Startup Pitch",
			"start": "2024-09-25T11:15:00-04:00",
			"desc": "Startup pitch competition.",
			"location": "789 Pine St, San Francisco, CA 94105"
		},
		{
			"title": "Hackathon",
			"start": "2024-10-10T10:30:00-07:00",
			"desc": "Join the coding challenge at our hackathon.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Panel Discussion",
			"start": "2024-10-25T15:45:00-05:00",
			"desc": "Engage in a lively panel discussion.",
			"location": "890 Elm St, Boston, MA 02108",
			"color": "red"
		},
		{
			"title": "Networking Event",
			"start": "2024-11-15T18:00:00-04:00",
			"allDay": true,
			"desc": "Connect with professionals at our networking event.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Workshop",
			"start": "2024-12-02T09:00:00-05:00",
			"allDay": true,
			"desc": "Learn new skills at our workshop.",
			"location": "123 Maple St, Austin, TX 78701"
		},
		{
			"title": "Conference",
			"start": "2025-01-18T14:00:00-07:00",
			"desc": "Annual conference.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Holiday Party",
			"start": "2025-02-05T18:30:00-04:00",
			"desc": "Celebrate the holidays at our party.",
			"location": "https://zoom.us/join",
			"color": "red"
		},
		{
			"title": "Seminar",
			"start": "2025-03-20T10:30:00-07:00",
			"desc": "Informative seminar.",
			"location": "456 Oak St, Chicago, IL 60601"
		},
		{
			"title": "Webinar",
			"start": "2025-04-10T16:00:00-05:00",
			"desc": "Interactive webinar on emerging technologies.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Startup Pitch",
			"start": "2025-05-05T11:15:00-04:00",
			"allDay": true,
			"desc": "Startup pitch competition.",
			"location": "789 Pine St, San Diego, CA 92101"
		},
		{
			"title": "Hackathon",
			"start": "2025-06-10T10:30:00-07:00",
			"desc": "Join the coding challenge at our hackathon.",
			"location": "https://zoom.us/join",
			"color": "red"
		},
		{
			"title": "Panel Discussion",
			"start": "2025-07-25T15:45:00-05:00",
			"desc": "Engage in a lively panel discussion.",
			"location": "890 Elm St, Boston, MA 02108"
		},
		{
			"title": "Networking Event",
			"start": "2025-08-15T18:00:00-04:00",
			"desc": "Connect with professionals at our networking event.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Workshop",
			"start": "2025-09-02T09:00:00-05:00",
			"allDay": true,
			"desc": "Learn new skills at our workshop.",
			"location": "123 Maple St, Austin, TX 78701"
		},
		{
			"title": "Conference",
			"start": "2025-10-18T14:00:00-07:00",
			"desc": "Annual conference.",
			"location": "https://zoom.us/join",
			"color": "red"
		},
		{
			"title": "Holiday Party",
			"start": "2025-11-05T18:30:00-04:00",
			"allDay": true,
			"desc": "Celebrate the holidays at our party.",
			"location": "https://zoom.us/join"
		},
		{
			"title": "Seminar",
			"start": "2025-12-20T10:30:00-07:00",
			"allDay": true,
			"desc": "Informative seminar.",
			"location": "456 Oak St, Chicago, IL 60601"
		}
	]

}
  • 我们再新建一个Js对象，例如命名为：JSObject1

  • 可以贴入下面的代码
export default {	
	//https://www.unpkg.com/fullcalendar@6.1.8/index.global.min.js
	//https://fullcalendar.io/docs/v5/event-model
	
	//replace with your event data, mapped to the same schema expected by fullcalendar
	eventData:  sampleEvents.data, 
	//
	async onOpen(){this.htmlDoc()},

	//initialize iframe srcDoc variable, selectedEvent
	calHtml: '<p>document loading...<p>',
	selectedEvent: this.eventData[0],

	//selecting a calendar event will post the event object to appsmith
	onMsgReceived() {
		const e = JSON.parse(Iframe1.message);
		//if an existing event was clicked, show it
		if(e.event){
			this.selectedEvent = JSON.parse(Iframe1.message).event;
		showModal('mdl_selectedEvent')
		}
		else{
			this.selectedEvent = {};
			showModal('mdl_newEvent')
		}
	},

	htmlDoc() {
		this.calHtml = `<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'/>
    <script src='https://www.unpkg.com/fullcalendar@6.1.8/index.global.min.js'></script>
    <script>
		
		function sendToAppsmith(e){
		  window.parent.postMessage(JSON.stringify(e), '*')
		};
		
      document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth',
					buttonIcons: true,
					weekends: true,
					eventColor: '${global.theme.colors.primaryColor}',
          events: ${JSON.stringify(this.eventData)},
          eventClick: sendToAppsmith,
					dateClick: sendToAppsmith,
        });
        calendar.render();
      });
    </script>
		<style>
body {
  font-family: 'Trebuchet MS', sans-serif; 
}
.fc-event {
  font-size: 10pt;
}
button  {
background: ${global.theme.colors.primaryColor} !important;
border: none !important
}
</style>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>`
		return this.calHtml
	},

	//transposes a single row, pivots for viewing vertically in table widget
	objToRows: (obj=sampleEvents.data[0]) => Object.keys(obj)
	.reduce((newArr, value) => newArr.concat({ 'prop': value, 'value': obj[value]}), [])
}
  • 代码板块讲解：
  1. 定义事件数据：eventData 将被用于在日历上显示事件。在这个案例中，使用了 sampleEvents.data 作为我们的事件数据。
  2. 初始化变量： calHtml 和 selectedEvent。calHtml 是 iframe 的 HTML 内容，初始值是一个加载提示。selectedEvent 是被选中的事件，初始值是 eventData 的第一个事件。
  3. 处理 iframe 打开事件：定义了一个 onOpen 函数，这个函数在 iframe 打开时被调用。在这个函数中，调用 htmlDoc 函数来生成 iframe 的 HTML 内容。
  4. 处理 iframe 接收到消息的事件：定义了一个 onMsgReceived 函数，这个函数在 iframe 接收到消息时被调用。如果点击了一个已存在的事件，它会显示这个事件（打开对应弹窗mdl_selectedEvent）。如果点击了一个新的日期（打开对应弹窗mdl_newEvent），它会显示一个新的事件。
  5. 生成 iframe 的 HTML 内容：定义了一个 htmlDoc 函数，这个函数用于生成 iframe 的 HTML 内容。这个内容包括一个 FullCalendar 日历，这个日历使用了 eventData 中的事件数据。当点击一个事件或一个日期时，它会将事件对象发送到 Pageplug。

  6. 转换对象为行：定义了一个 objToRows 函数，这个函数转化对象数据，可以用于在表格组件中垂直查看数据

2.3 事件绑定

PagePlug的组件的数据传递，主要通过{{ }}的方式处理，更多方法及使用可以查阅PagePlug使用文档

  • 在Iframe组件中的HTML选项里面，我们可以调用Js对象里面的htmlDoc方法
{{JSObject1.htmlDoc()}}

  • 在onMessageReceived事件中，我们可以调用Js对象里面的onMsgReceived方法
{{JSObject1.onMsgReceived()}}

2.4 案例拓展

  • 自定义一个在线代码编辑器，我们可以在HTML选项中，贴入下面的代码

<head>
<style type="text/css" media="screen">
    #editor { 
        position: absolute;
        top: 0px;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>
<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.19.0/src-min-noconflict/ace.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/javascript");
    editor.on("change", function() {
        // Get the value of the editor and send it to the parent window
        var code = editor.getValue();
        window.parent.postMessage(code, "*");
    });
</script>

2.5 客户案例（脱敏）

目前PagePlug服务的某大型餐饮企业客户，基于现有的内部营销系统工具，利用低代码PagePlug来增强其他场景的功能，研发侧和业务侧的效能得到了显著的提升（下面案例演示已获得授权同意并进行了脱敏处理）

  • 例如微信公众号菜单配置、图文管理等

  • 私域带货小程序的配置管理后台

 三、其他相关案例

  • 工程管理系统：优化数据源信息内容及审批流程

‍ 线上体验地址：工程管理系统

  • 跨境电商仓库管理系统案例：该系统允许用户管理多个仓库的产品和库存、以及跟踪供应商产品和管理供应商

‍ 线上体验地址：跨境电商仓库系统

四、企业版的介绍

如果想了解PagePlug企业版/商业版的价格及更多功能，可放大下方图片查看

对PagePlug上一些功能使用讲解及介绍，可以点击下方文章查看

1、PagePlug企业版开发案例（一）——企微定时群发工具

PagePlug企业版开发案例（一）——企微定时群发工具_pageplug开源低代码融合工作流开发教程——保姆级实战开发-CSDN博客文章浏览阅读944次，点赞31次，收藏16次。快速开发内部应用工具，告别SaaS数据存储安全问题及个性化需求问题_pageplug开源低代码融合工作流开发教程——保姆级实战开发https://blog.csdn.net/AppsmithCN/article/details/1353805732、PagePlug开源低代码融合工作流开发教程——保姆级实战开发

PagePlug开源低代码融合工作流开发教程——保姆级实战开发-CSDN博客文章浏览阅读80次。PagePlug是一款面向研发开发使用、开源的、前后端一体的低代码工具，拥有强大的可视化建模和API集成能力，支持与工作流的融合，实现更强大的企业应用开发https://blog.csdn.net/AppsmithCN/article/details/134317961?spm=1001.2014.3001.55013、Formily开发实战——3分钟完成一个登录页的开发，Formily表单与PagePlug低代码的完美融合

Formily开发实战——3分钟完成一个登录页的开发，Formily表单与PagePlug低代码的完美融合_formily github-CSDN博客文章浏览阅读706次，点赞3次，收藏7次。Formily——更高效的表单解决方案与开源低代码Pageplug的融合_formily githubhttps://blog.csdn.net/AppsmithCN/article/details/1307655654、国内优秀的开源低代码框架：PagePlug，面向研发使用，拒绝重复、低价值的工单循环开发

国内优秀的开源低代码框架：PagePlug，面向研发使用，拒绝重复、低价值的工单循环开发_低代码开源框架-CSDN博客文章浏览阅读1.9k次，点赞2次，收藏7次。面向研发使用、更懂国内企业的开源低代码_低代码开源框架https://blog.csdn.net/AppsmithCN/article/details/1313800085、保姆级低代码实战教程——玩转PagePlug表格开发，增删改查分页如此简单

保姆级开源低代码实战教程——玩转PagePlug表格开发，增删改查分页如此简单_pageplug github-CSDN博客文章浏览阅读997次，点赞3次，收藏7次。面向研发使用开发的开源低代码，比低代码区别很大的，相较于轻流、简道云、轻宜搭、微搭、帆软、活字格等等的低代码灵活性及维护更好_pageplug githubhttps://blog.csdn.net/AppsmithCN/article/details/1312107306、PagePlug：低代码平台入门教程—10分钟搭建一个用户改查系统

PagePlug：低代码平台入门教程—10分钟搭建一个用户改查系统-CSDN博客文章浏览阅读635次，点赞2次，收藏5次。PagePlug，面向研发使用的开源低代码平台，10分钟搭建一个用户改查系统_pageplughttps://blog.csdn.net/AppsmithCN/article/details/1317902567、PagePlug低代码入门教程——与Websocket的集成

PagePlug低代码入门教程——与Websocket的集成_websockets.send body-CSDN博客文章浏览阅读154次，点赞2次，收藏2次。通过PagePlug低代码与Websocket集成，实现前端页面的数据实时通信_websockets.send bodyhttps://blog.csdn.net/AppsmithCN/article/details/1325114838、B站上也有一些案例教程，欢迎查看研究～～

​欢迎点赞、收藏、喜欢三连鼓励下哟 ，避免找不到文章啦

PagePlug
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值