form表单提交serialize()拼接日期出错_微软Canvas App实战之定制化表单数字的呈现...

在上一期的内容中我向大家介绍了使用Canvas App变量和事件的正确姿势，今天再来跟大家谈一谈在微软CanvasApp实战中定制化表单数字的呈现。

通常在应用系统中，日期、时间、货币、数字需要被格式化显示在界面上供用户使用。在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]#,###"))

今天就到这吧，我们下期再会!

— END— ☟

延伸阅读

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

 今日互动话题 

圣诞节马上到了，今年的圣诞节

你打算怎么过？