开发者学堂课程【低代码认证-第一章:项目评选系课程：1.2项目评选系统的低代码基础】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/1007/detail/15054
项目评选系统的布局设计
九、自定义页面表单数据实践
了解了上述的功能点后，来看一下自定义页面表单数据实践。本次实践的功能点有区块模板展示数据和详情跳转功能。区块模板展示数据是当获取了表单的数据之后，需要处理并绑定在区块模板的文本的内容属性上进行展示。详情跳转功能是可以点击按钮跳转到对应的数据详情页面，查看更多的数据。这里面涉及到了表单页面和自定义页面，会在自定义页面当中通过远程数据源调用宜搭平台的接口获取表单，数据获取完成后，处理数据并绑定在文本内容属性上。绑定完成之后，去设置详情跳转的功能。详情跳转功能是使用到了动作面板加跳转的 API 来实现的，会跳转到表单的详情页面去查看。了解了实践流程以及实践的功能点
十、实操演练
首先进入到上节课创建的项目管理应用当中。这里已经提前创建好了一个表单页面名称叫项目表单，在这里面已经录入了四条数据。接下来，就要在自定义页面来实现获取表单里面的这些数据并且绑定在自定义页面上来展示这些数据。
首先打开页面的编辑页面，左侧工具栏当中的数据源。然后点击添加。可以快速新建一个远程 API 也就是创建一个远程数据源。可以看到去配置名称，描述，自动加载，加载方式、请求地址、请求方法、请求参数，是否发送请求，还有数据处理等等。更改名称，随意起名。当然名称是不能使用 javascript 的关键字的，然后我们去更改请求地址，这里面是想要在一进入这个页面的时候，就可以把数据展示出来，所以开启的自动加载，并且加载方式是并行的。
然后来讲一下请求地址，请求地址可以去文档当中去获取宜搭平台的接口然后放置在里面，先打开使用手册然后找到宜搭平台的接口。这里已经提前开启了这样的一个页面.
一起看一下使用手册当中的宜搭平台接口，第一点是的一个调用说明，可以看到是由域名还有应用编码，还有接口进行组成。也可以直接复制图上的地址。
复制下来，然后去更改 APP tap，也就是应用编码，还有接口路径即可。复制过来。然后应用编码，如果是浏览器。可以将上方 APP tap 直接复制下来。
粘贴在里面即可，如果不是使用的浏览器，而是使用的工作台也可以返回到的应用当中，然后再用设置当中部署运维去获取到应用编码，保存。返回页面的时候数据源也是保存的。返回到页面在应用设置当中这里面有部署运维，这里也可以获取到应用编码，然后返回到地址当中。返回到页面当中。继续配置远程数据源。接口还没有修改。接口可以去宜搭平台接口当中去寻找。因为调取的项目表单是一个表单页面，所以找到的是表单实例，需要根据条件去搜索实例详情，所以使用3.6的接口。
可以看到一个接口，然后请求类型，还有权限控制，还有必填参数都在这边有说明。先将接口复制过去。请求参数是有一项是必填的，也就是 formUuid ，所以选择添加一项，然后在参数名，设置宜搭平台接口把参数名复制过来。formUuid 的简介是表单的 ID.
看一下示例，刚才在部署运维当中也看到了 formUuid，所以返回到的部署运维，保存。先复制一个这个页面。以备后续使用，然后回到页面当中。同样的应用设置、部署运维。可以看到有两个表单，其中项目表单就是需要获取的，这条数据将表单 ID 获取到，然后返回到页面上将参数值传入进去，就完成了配置的远程数据源。
填写完成后，想要看一下返回的数据，除了控制台的 network 查询可以查看以外，还可以通过这里面的数据处理。去查看返回的数据，可以使用请求完成毁掉的函数，也就是 dispatch。然后去打印返回的数据。保存。然后预览。选择用新窗口打开，右键点击检查。可以看到，刚才打印的这样的数据已经出现了，这就是请求的数据源反馈出来的数据可以看到 content 对象中使用 date 来用来存放表单数据的，可以看到这里面是有四条数据，对应的是项目表单里面的四条数据。然后想要在这个页面当中也就是描述信息当中获取里面的详情。是多号文本写入的。
可以看到这里用的是 date 来存放表单的数据,那如果获取的第一条数据，那么就用下标为零来进行获取。那这条数据里面的具体的内容，又需要在 formData 当中去进行寻找对应的值，也就是说请求的接口返回的数据，还需要再次处理才能返回表单组件，那个值展示在的页面上，根据这种方式来绑定文本内容。在文本当中去绑定变量。可以选择我们定义好的一个数据源，选择的是 state.getDatas，也就是刚才定义的 getDatas 远程数据源。并且找到第零个下标，也就是第一条数据.
然后去找里面的具体内容，具体内容在 formData 当中。然后具体内容的这个值来复制过来。就绑定完成了，点击确定预览，来看一下效果是否有更改。点击预览，可以看到这里面的文字已经变成了刚才看到的多行文本里面的这个内容。这样就将数据获取到了当前的自定义页面当中。
想要去点击按钮，去跳转到对应的项表单的详情页面，应该如何去实现呢？拖动一个文本组件。用来存放 formInstId，可以看一下。在项目表单的数据管理页当中来查看这条数据。新开页面，可以看到前面是固定的。所以需要的是点击按钮然后跳转拼接上唯一 formInstId，这样就可以找到对应的项目表单页面。
返回到自定义页面当中，同样的来绑定变量。去获取到 formInstId，看一下在哪里，关上看一下第零条数据里面的 formInstId。这就可以通过 [date 0.] 方面的 ID来获取这条数据了。所以制定页面。复制过来。然后点击确定，这样 formInstId 就已经配置完成了。然后需要的是点击按钮去跳转，所以需要给按钮绑定一个点击动作的，点击按钮，在属性当中去找到动作设置，可以新建动作,选择 onCick 点击按钮。也就是创建一个点击的事件。
绑定完成后在里面去书写业务逻辑。在这里面我们使用的是 jsapi 当中的路由跳转。到宜搭开发者中心当中去找到 API 参考。去寻找路由的页面跳转。有四个参数。更改路径，还有携带参数，后面两个使用处就可以。
返回到页面当中，复制过来。然后去更改路径。将前面的复制过来，粘贴。携带参数是要获取的 formInstId，也就是要获取已经放入到文本当中的 formInstId，需要的是获取到这个文本的唯一标识，然后获取里面的内容。这里面内容的属性是content，而不是 value，所以不能使用 getvalue 来获取，所以在这边使用的是 get 的方法，先复制唯一标识。去定义一个 formInstId, 通过 API 方法. $(‘’text-ky9iue39’’).get(“content”) 这里面是他的属性，用 content。也就是内容来获取到，然后这样就获取到了唯一标识，这里面传递的参数以这样的方式去进行传递的，然后后面改为 ture。填写完成之后，保存预览，看一下效果。点击按钮。可以看到已经跳转到对应的表单的一个详情页面去进行查看里面的数据了，这就是点击查看保单详情页面的配置。
可以看到自定义页面当中去展示 formInstId 是很难看的。所以也可以隐藏掉，这样并不影响获取里面的内容，可以在这个文本后面去找到容器。
然后去设置容器的隐藏，也可以找到文本，然后去设置文本隐藏。预览看一下效果。这样文本就隐藏了，但是点击按钮并不影响使用。这就是项目评选实践低代码基础，接下来会选择项目评选时间应用
