# 组装"业务用户注册"页面
"业务用户注册"页面实际上是一个对话框，是在管理员操作"新增用户"时，弹窗的注册对话框，详细如[图1]所示。
图1业务用户注册对话框   
![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675270.png)
结合页面需求，页面需要创建如下模型：
表1模型分析 
| 模型名称     | 作用           | 详细定义                                                                                                                                                                                                                                                                                                                                                                                         |
|:---|:---|:---|
| userInfo | 保存注册用户信息的参数。 | 自定义模型，包含的计算节点如下： - username：用户名，与输入框绑定。  - password：密码，与输入框绑定。  - role：角色，与下拉框绑定。   |
   
#### 操作步骤
1. 在"我的应用"中，单击"设备维修管理系统"，进入应用。
2. 在"User"目录中，鼠标放在"Page"上，单击界面上出现的"+"，在弹出菜单中选择"标准页面"。
3. 在"标签"和"名称"文本框中输入"registerPortalUser"，单击"添加"。 
   当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992862.png)进行锁定。
   
   
4. 定义模型"userInfo"。 
   1. 在页面底部单击"模型视图"，然后在"模型视图"中，单击"新增模型"。
   
   2. 添加自定义模型，模型名称"userInfo"，单击"下一步"。
   
   3. 单击"新增节点"，为模型添加节点"username"、"password"、"role"字段，字段类型都采用默认的Text。单击"下一步"，再单击"确定"。
      图2新增节点   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835226.png) 
   
   4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991473.png)，保存模型。
   
   
   
   
5. 拖拽页面组件。 
   1. 单击"设计视图"，从"模型视图"切换到"设计视图"。
   
   2. 从左侧基本组件列表区中，拖拽1个"表单"到"页面内容"中。 因为当前还没有定义数据源，在"元数据表单配置向导"弹窗底部，单击"取消"，创建一个空的表单控件。
      图3拖拽一个空表单   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483072033.png "点击放大") 
   
   3. 拖拽1个"容器"到"表单"。
   
   4. 拖拽1个"分栏"到"容器"。
   
   5. 修改"分栏"为1栏（1行1列）。
      图4设置分栏为1行1列   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911745.png "点击放大") 
   
   6. 选择"分栏"下的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992858.png)2次，新增2个分栏。
   
   7. 向前两个分栏，分别拖拽1个"输入框"组件，向第三个分栏中，拖拽一个"下拉框"组件。
      图5拖拽输入框、下拉框   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911741.png "点击放大") 
   
   
   
   
6. 配置组件属性，及数据绑定。 
   1. 设置第一个"输入框"属性。
      1. 添加值绑定。 选中"输入框"组件，单击"数据绑定"下"值绑定"的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231517.png)，在弹窗中选择" userInfo"下的"username"字段。
         
      
      2. 修改"标签"为"用户名"，"占位符"为"请输入用户名"。
       
   
   2. 设置第二个"输入框"属性。
      1. 添加值绑定。 选中"输入框"组件，单击"数据绑定"下"值绑定"的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152118.png)，在弹窗中选择" userInfo"下的"password"字段。
         
      
      2. 修改"标签"为"密码"，"占位符"为"请输入密码"。
       
   
   3. 设置"下拉框"属性。
      1. 添加值绑定。 单击"数据绑定"下"值绑定"的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483072029.png)，在弹窗中选择"userInfo"下的"role"字段。
         
      
      2. 修改"标签"为"角色"，并设置"选项"为"cs，客服人员"，"ds，派单人员"、"ms，维修人员"。
         图6设置选项值   
         ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152122.png) 
       
   
   
   
   
7. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231521.png)，保存设置。
8. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675274.png)，进入预览页面，查看页面是否符合预期，并单击查看是否有下拉框选项。
   
   图7页面预览   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991477.png "点击放大")