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

PagePlug

已于 2024-01-17 17:21:18 修改

阅读量1k

点赞数 24

文章标签：低代码 javascript 前端 react 开源软件

于 2024-01-17 17:20:08 首次发布

本文链接：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]}), [])
}

代码板块讲解：

定义事件数据：eventData 将被用于在日历上显示事件。在这个案例中，使用了 sampleEvents.data 作为我们的事件数据。
初始化变量： calHtml 和 selectedEvent。calHtml 是 iframe 的 HTML 内容，初始值是一个加载提示。selectedEvent 是被选中的事件，初始值是 eventData 的第一个事件。
处理 iframe 打开事件：定义了一个 onOpen 函数，这个函数在 iframe 打开时被调用。在这个函数中，调用 htmlDoc 函数来生成 iframe 的 HTML 内容。
处理 iframe 接收到消息的事件：定义了一个 onMsgReceived 函数，这个函数在 iframe 接收到消息时被调用。如果点击了一个已存在的事件，它会显示这个事件（打开对应弹窗mdl_selectedEvent）。如果点击了一个新的日期（打开对应弹窗mdl_newEvent），它会显示一个新的事件。
生成 iframe 的 HTML 内容：定义了一个 htmlDoc 函数，这个函数用于生成 iframe 的 HTML 内容。这个内容包括一个 FullCalendar 日历，这个日历使用了 eventData 中的事件数据。当点击一个事件或一个日期时，它会将事件对象发送到 Pageplug。
转换对象为行：定义了一个 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>