微软Canvas App实战之定制化表单数字的呈现

雨点打透心脏的1/2处 2023-10-03 10:55 7阅读 0赞

***版权声明:**本文由神州数码云基地团队整理撰写，若转载请注明出处。*

> Canvas App开发过程中遇到的定制化表单数字的呈现的一些问题。

通常在应用系统中，日期、时间、货币、数字需要被格式化显示在界面上供用户使用。在Canvas App中，格式化输出使用的是Text函数。其操作对象的输出是文本值。但是，由于零代码拖拉拽生成的Form表单不支持自定义格式，这就造成了较大的麻烦。

本片较短，提供了一个千分位格式显示数字的基本操作思路，阅读约需要5分钟。其他格式同理。

首先我们需要了解一下，Form的结构是三级层次：表单（Forms）-卡片（card）-文本框（Text Input）。表单提交数据时，使用的是Updates值。而此值是所有卡片的Update值的大合集。我们可以通过属性面板观察到，每一个Card的Update其实是具体控件值的一个代理。

那么，我们可以自己做一个变量，取代原有控件为Card提供数据，就不会干扰到数据提交了。于此同时，我们需要维护控件值与我们的变量之间的一致性。

跟我来一步一步做吧：

**首先声明一个全局变量，我选择在屏幕显示时执行以下代码：**

Set(A,"")

这是一个全局变量，当然你也可以使用局部变量。

**然后在Card中找到你所需要格式化文本的控件。**

将其Format从Number修改为Text；将其Default修改为变量A，而不是默认的数据源值。毕竟原装的数字是不带格式的。

**接着修改该控件的OnChange，代码如下**。

含义见注释。

// 修改变量值为千分位文本
    UpdateContext({A:Text(Value(Self.Text),"[$-en-US]#,###")});
    // 将文本框的值设置为默认值
    Reset(Self);

这样，控件值就和变量A双向一致了。到此，修改数字的显示格式完成。

然后，有人会担心，这样做是否有副作用呢？毕竟数值型被修改为文本型了啊！

不用怕，去Card控件的Update属性里看看就知道了。文本框值被Value函数转换为值了。所以这样做是没有副作用的。

当然，如果你的变量A是从数据库加载得到的，那么第一步对应代码可能需要修改为

Set(A,Text(Value(查询结果变量),"[$-en-US]#,###"))

传送门

[微软Canvas App实战踩坑指南.5：定制化表单数字的呈][Canvas App_.5]

[Canvas App_.5]: https://zhuanlan.zhihu.com/p/315647294

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app 表单校验

uni-app 是一个使用 Vue.js 开发跨平台应用的框架。表单校验是指在提交表单之前对表单中的数据进行检验的过程。在 uni-app 中，可以使用 Vue.js 的表

超、凢脫俗/ 2024年03月27日 12:46/ 0 赞/ 127 阅读

相关 uni-app之表单组件教程玩转交互式表单

在UniApp中，表单组件是构建用户交互的重要元素。本教程将详细介绍UniApp中的各种表单子组件，包括(button、checkbox、editor、form、input、l

╰半夏微凉°/ 2024年03月16日 21:41/ 0 赞/ 129 阅读

相关微软Canvas App实战之发布也是一种二次开发

版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。 > 在使用微软Canvas App进行开发过程中，在发布中遇到的一些问题及解决方案。大家知道，一个普通开发

旧城等待，/ 2023年10月03日 10:59/ 0 赞/ 6 阅读

相关微软Canvas App实战之Access导入数据到SharePoint多值列

版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。 > 在使用微软Canvas App进行开发过程中，使用Access导入数据到SharePoint多值列遇到的一

桃扇骨/ 2023年10月03日 10:59/ 0 赞/ 9 阅读

相关微软Canvas App实战之使用多值列

版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。 > 在使用微软Canvas App进行开发过程中，使用Combo box控件下拉框遇到的一些问题及解决方案。

青旅半醒/ 2023年10月03日 10:56/ 0 赞/ 8 阅读

相关微软Canvas App实战之undocumented feature

版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。 > 在使用微软Canvas App进行开发过程中，遇到的一些undocumented feature。 0

喜欢ヅ旅行/ 2023年10月03日 10:55/ 0 赞/ 11 阅读

相关微软Canvas App实战之定制化表单数字的呈现

版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。 > Canvas App开发过程中遇到的定制化表单数字的呈现的一些问题。通常在应用系统中，日期、时间、货币

雨点打透心脏的1/2处/ 2023年10月03日 10:55/ 0 赞/ 8 阅读

相关微软Canvas App实战之事件驱动 or 数据绑定

版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。 > 本文描述了使用Canvas App变量和事件的正确姿势，全文1700字，需要10分钟。首先我们用一个

淩亂°似流年/ 2023年10月03日 10:55/ 0 赞/ 9 阅读

相关【UEFI实战】SlimBootloader定制化

综述 SBL的一个特性是Customizable，它分为构建前和构建后的定制化。 SBL有两种配置数据，分别是内部配置数据和外部配置数据。内部配置数据是代码写死的默认数

约定不等于承诺〃/ 2023年10月02日 16:53/ 0 赞/ 59 阅读

相关 app表单限制

<input type="text" maxlength="11" /> 这种写法可以限制input输入框字符长度为11，但是不能限制输入框字符长为纯数字，限制

Love The Way You Lie/ 2021年07月25日 00:45/ 0 赞/ 328 阅读