华为云低代码AstroZero技巧教学8:表单提交限制功能设置

活动运营人员在设置活动报名表单中通常会对表单提交设置时间限制,以此确保用户只能在活动开始前的一定时间内提交报名信息;也会通过人员限制(如限制报名人数或特定人群)来控制活动的参与度和质量。这是表单应用在工作中的一个典型场景。

除此之外,在问卷调查、在线预约、课程报名、内部审批等多行业多业务的工作场景中,表单的收集往往都会进行相应的提交限制功能(时间限制和人员限制等)以此提高数据质量、增强用户体验、提升转化率和管理方便性。

华为云低代码Astro Zero的表单创建中同样为各位开发者提供了这样的限制功能设置。

本次技巧内容:使用AstroZero创建表单设置限制功能

期望实现效果:

1.提交表单,显示提交过晚

图1 提示提交过晚

2.显示用户类型校验失败

图2 非业务用户无法提交

操作步骤

1.登录并打开华为云低代码Astro Zero

点击文末“阅读原文”即可跳转Astro Zero官网”,如果你是新用户可点击下方文章链接了解基础的注册使用方法。

2.新建一个对象(如product),并为对象添加字段。

图3 为对象添加字段

3.创建一个脚本

(1)在应用设计器中,选择“逻辑”,单击脚本后的“+”。

(2)新建一个空白的脚本(如submitLimit),单击“添加”。

图4 创建脚本submitLimit

(3)在脚本编辑器中,输入示例代码。

//本脚本用于提交表单以及限制提交时间、用户类型import * as db from 'db';//导入处理object相关的标准库import * as context from 'context';//导入上下文相关的标准库import { now } from 'date';import { toDate } from 'date';//定义入参结构@action.object({ type: "param" })export class ActionInput {@action.param({ type: 'String', required: true, label: 'String' })proId: string;@action.param({ type: 'String', required: true, label: 'String' })proName: string;}//定义出参结构,出参包含1个参数,workOrder的记录id@action.object({ type: "param" })export class ActionOutput {@action.param({ type: 'String' })id: string;}//使用数据对象命名空间__product__CST@useObject(['命名空间__product__CST'])@action.object({ type: "method" })export class CreateWorkOrder {    //定义接口类,接口的入参为ActionInput,出参为ActionOutput@action.method({ input: 'ActionInput', output: 'ActionOutput' })public createWorkOrder(input: ActionInput): ActionOutput {let out = new ActionOutput();    //新建出参ActionOutput类型的实例,作为返回值let error = new Error();    //新建错误类型的实例,用于在发生错误时保存错误信息try {let currentTime = now();let date = toDate('2025-06-08 20:08:08', 'yyyy-MM-dd HH:mm:ss');if (date.getTime() < currentTime.getTime()) { // 限制提交时间error.name = "WOERROR";error.message = "Submitted too late";throw error;}let user = context.getUserType();if (user != "PortalUser") { // 限制提交用户类型,只有业务用户PortalUser可以提交error.name = "WOERROR";error.message = "Not PortalUser!";throw error;}let productData = new Object();productData['命名空间__proName__CST'] = input.proName;   //入参赋值productData['命名空间__proId__CST'] = input.proId;let s = db.object('命名空间__product__CST');    //获取命名空间__product__CST这个Object的操作实例let id = s.insert(productData);if (id) {out.id = id;} else {error.name = "WOERROR";error.message = "Unable to create product!";throw error;}} catch (error) {console.error(error.name, error.message);context.setError(error.name, error.message);}return out;}}

(4)单击保存​,保存脚本,保存成功后单击“灯泡图标”,激活脚本。

4.创建表单页面,用于提交表单数据。

(1)在应用设计器中,选择“界面”,单击页面后的“+”。

(2)拖入2个输入框组件和1个按钮组件。

将输入框标签修改为“name”和“id”,将按钮显示名称设置为“添加”。

图5 设计表单页面

5.新建对象模型

(1)在标准页面中,单击底部的“模型视图”。

(2)单击“新增模型”,输入模型名称、“来源”选择“服务”,单击“下一步”。

图6 新建模型

(3)选择2中创建的脚本,单击“下一步”,完成模型创建。

图7 选择脚本

6.返回设计视图页面,新建表格关联模型。

(1)选中name输入框,在“属性 > 数据绑定 > 值绑定”中,单击“齿轮”

(2)选中4中创建的模型,单击“确定”。

图8 选择模型

图9 绑定后效果

7.为添加按钮,添加事件。

(1)选中添加按钮组件,选择“事件”页签。

(2)单击“点击”后的“+”,进入添加动作页面。

(3)在自定义动作中,输入自定义代码,单击“创建”。

图10 自定义动作

$model.ref('submitLimit').run().then(function(data){context.$message.success('Submitted successfully.');console.log(data);}).catch(function(error){context.$message.success('Submission failed:' + error.resMsg);});

8.返回标准页面,大功告成,单击保存,保存页面,保存成功后单击预览,预览效果吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/5894.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

计算机网络:网络层 —— 移动 IP 技术

文章目录 IPv6IPv6 的诞生背景主要优势IPv6引进的主要变化 IPv6数据报的基本首部IPv6数据报首部与IPv4数据报首部的对比 IPv6数据报的拓展首部IPv6地址IPv6地址空间大小IPv6地址的表示方法 IPv6地址的分类从IPv4向IPv6过渡使用双协议栈使用隧道技术 网际控制报文协议 ICMPv6ICM…

深度学习经典模型之ZFNet

1 ZFNet 1.1 模型介绍 ​ ZFNet是由 M a t t h e w Matthew Matthew D . Z e i l e r D. Zeiler D.Zeiler和 R o b Rob Rob F e r g u s Fergus Fergus在AlexNet基础上提出的大型卷积网络&#xff0c;在2013年ILSVRC图像分类竞赛中以11.19%的错误率获得冠军&#xff08;实际…

Cisco Packet Tracer 模拟器实现一些交换机的基本配置

1. 内容 应用Cisco Packet Tracer 5.3搭建网络 应用Cisco Packet Tracer 5.3配置网络 通过不同的命令实现交换机的基本配置&#xff0c;包括交换机的各种配置模式、交换机的基本配置、交换机的端口配置。 2. 过程 2.1 打开软件 安装模拟器后打开如下&#xff1a; 图1 安装并…

Logstash 安装与部署(无坑版)

下载 版本对照关系&#xff1a;ElasticSearch 7.9.2 和 Logstash 7.9.2 &#xff1b; 官方下载地址 选择ElasticSearch版本一致的Logstash版本 https://www.elastic.co/cn/downloads/logstash 下载链接&#xff1a;https://artifacts.elastic.co/downloads/logstash/logst…

C++《list》

在本篇当中我们将学习STL中的list&#xff0c;在此list就是我们之前在数据结构学习过的链表&#xff0c;在本篇中我们要来了解list当中的成员函数该如何使用&#xff0c;由于list各个函数的接口和之前学习过的vector类型&#xff0c;因此在学习list的使用就较为轻松。在lis篇章…

爬虫-------字体反爬

目录 一、了解什么是字体加密 二. 定位字体位置 三. python处理字体 1. 工具库 2. 字体读取 3. 处理字体 案例1:起点 案例2:字符偏移: 5请求数据 - 发现偏移量 5.4 多套字体替换 套用模板 版本1 版本2 四.项目实战 1. 采集目标 2. 逆向结果 一、了解什么是…

Go-性能优化、优化分析、调优实战pprof

使用官方自带benchmark进行基准性能测试 第一个是函数名-核数 第二个是执行次数 第三个是一次执行时间 第四个是一次执行的多大的内存 第五个是一次执行申请几次内存 slice用的时候在make&#xff08;&#xff09;初始化切片时提供容量信息 data:make([]int,0) data:make([]in…

Node.js——fs模块-文件追加写入

1、appendFile/appendFileSync 追加写入 appendFile 作用是在文件尾部追加内容&#xff0c;appendFile 语法与 writeFile 语法完全相同 语法&#xff1a; 返回值&#xff1a;二者都为&#xff1a; undefined 本文的分享到此结束&#xff0c;欢迎大家评论区一同讨论学习&#…

单元测试日志打印相关接口及类 Logger

LoggerFactory 简介 单元测试常用日志打印工具LoggerFactory。 LoggerFactory 代码结构 LoggerFactory 是 JUnit 平台中的一个类&#xff0c;用于创建 Logger 实例。它被设计用于提供日志记录功能&#xff0c;使得 JUnit 在执行测试时能够记录信息、警告、错误等。 LoggerFact…

《Linux运维总结:基于银河麒麟V10+ARM64架构CPU部署redis 6.2.14 TLS/SSL哨兵集群》

总结:整理不易,如果对你有帮助,可否点赞关注一下? 更多详细内容请参考:《Linux运维篇:Linux系统运维指南》 一、简介 Redis 哨兵模式是一种高可用性解决方案,它通过监控 Redis 主从架构,自动执行故障转移,从而确保服务的连续性。哨兵模式的核心组件包括哨兵(Sentine…

ENSP作业——园区网

题目 根据上图&#xff0c;可得需求为&#xff1a; 1.配置交换机上的VLAN及IP地址。 2.设置SW1为VLAN 2/3的主根桥&#xff0c;设置SW2为VLAN 20/30的主根桥&#xff0c;且两台交换机互为主备。 3.可以使用super vlan。 4.上层通过静态路由协议完成数据通信过程。 5.AR1作为企…

Navicat16 安装图文配置

Navicat是什么&#xff1f; Navicat 是一个数据库管理工具&#xff0c;它提供了一个图形界面来方便地管理和操作各种数据库。Navicat 支持多种数据库类型&#xff0c;包括 MySQL、MariaDB、SQL Server、SQLite、PostgreSQL 和 MongoDB&#xff0c;并且也支持通过 SQL 命令直接连…

模块化开发 webpack

模块化开发 & webpack 1、模块化开发 & webpack1.1 webpack 执行过程1.1.1 初始化1.1.2 编译1.1.3 输出 2.1 webpack 基础配置2.1.1 Entry2.1.1.1 context2.1.1.2 Entry类型 2.1.2 output2.1.2.1 filename2.1.2.2 publicPath2.1.2.3 path2.1.2.4 libraryTarget 和 libr…

OpenEuler 使用ffmpeg x11grab捕获屏幕流,rtsp推流,并用vlc播放

环境准备 安装x11grab(用于捕获屏幕流)和libx264(用于编码) # 基础开发环境&x11grab sudo dnf install -y \autoconf \automake \bzip2 \bzip2-devel \cmake \freetype-devel \gcc \gcc-c \git \libtool \make \mercurial \pkgconfig \zlib-devel \libX11-devel \libXext…

uni-app 图标库整合最佳实践:使用 iconfont 构建属于自己的图标库

一. 前言 在前端开发中&#xff0c;图标已经成为页面设计中不可或缺的一部分。图标可以使界面更加美观、清晰&#xff0c;并且能够提升用户体验。而使用图标库来管理和引用图标资源&#xff0c;可以带来更多的便利和效率。 而在众多的图标库中&#xff0c;iconfont 独树一帜。…

刷题强训 (day1) -- 数字统计

1、数字统计 1.1题目 1.2 思路 根据题目得知我们要统计2出现的次数&#xff0c;那么这就是一个枚举 数字拆分的过程&#xff0c;先设一个变量count统计2出现的次数&#xff0c;那么count怎么变化呢&#xff1f; 当然了出现一个2&#xff0c;count就1&#xff0c;重点在于如何…

AI-基本概念-向量、矩阵、张量

1 需求 需求&#xff1a;Tensor、NumPy 区别 需求&#xff1a;向量、矩阵、张量 区别 2 接口 3 示例 4 参考资料 【PyTorch】PyTorch基础知识——张量_pytorch张量-CSDN博客

Halcon区域分割之分水岭分割法

现实中我们见到过有山有湖的景象&#xff0c;那么一定是水绕山、山围水的情形。当然可在需要的时候人工构筑分水岭&#xff0c;以防集水盆之间的互相穿透。而区分高山与水的界线以及湖与湖之间的间隔&#xff0c;就是分水岭。 分水岭分割法是一种基于拓扑理论的数学形态…

数据结构与算法——图

图 1.图的定义和表示 图的定义 图G由集合V和集合E组成&#xff0c;记作G(V,E),其中&#xff1a; 1、V是顶点元素的有限集合&#xff1b; 2、E是顶点间关系——边的有限集合。 3、边是顶点的无序对或有序对。 无向图和有向图&#xff1a; 无向图 由没有方向的边构成的图…

FebHost:法国.FR域名的市场前景和挑战

.FR域名的未来前景如何&#xff1f; .fr域名在2023年经历了显著增长&#xff0c;新注册量大幅增加。这一积极趋势凸显了法国 VSE&#xff08;极小型企业&#xff09;和 SME&#xff08;中小型企业&#xff09;数字化转型的持久影响&#xff0c;这一转变早在 2022 年就已开始。…