使用Component Library制作一个带排序功能的列表标题

我是微软Dynamics 365 & Power Platform方面的工程师/顾问罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面的微软最有价值专家(Microsoft MVP),这是我的第484篇原创文章,写于2022年9月22日。

前面的博文 ​​使用Component Library制作一个导航栏​​ 只使用了输入参数,并未用到输入参数,今天的例子我们做个列表标题,接受输入参数展示出来,可以进行排序的列旁边展示一个排序图表,点击可以进行排序,同事这个排序列的旁边还增加显示一个图标,告知用户是升序排列还是降序排列的,如果当前这个列是升序排列,再点击一次排序图标就会变成降序排列,以此切换排序。当然,这个排序只是传递两个输出参数,告知外面的数据源进行排序的列名称和是否升序排列。

我们先看下效果如下,可以看到前面两个列是可以排序的,所以展示了排序图标,现在是按照第一列升序排列的,可以看到升序排列的图标展示在第一列的排序图标前。

使用Component Library制作一个带排序功能的列表标题

我们点击下第一列的排序图标后,可以看到排序标志图标变了,变成降序排列的图标了。

使用Component Library制作一个带排序功能的列表标题

这个列表还支持缩放,比如我缩小屏幕,可以看到列的宽度也在等比缩放,效果如下:

使用Component Library制作一个带排序功能的列表标题

下面我就来讲解如何制作这个列表的标题,还是通过component library来定制一个通用的组件,我这个组件叫 TableTitleComponent ,我这里假设是最多5个列标题,当然更多以此类推就可以。你可能会问为啥我不用Gallery做成动态的?因为水平Gallery做了划分后每个模版是一样宽的,也就是每列是一样宽 ,这不符合实际需求,因为实际需求是有的列要展示的内容多就宽点,有得列窄点,每个列究竟多宽我通过参数传递进来占得百分比,这样在缩放的时候也会同比缩放列所占的宽度。

使用Component Library制作一个带排序功能的列表标题

可以看到我定义了4个输入参数,2个输出参数。

使用Component Library制作一个带排序功能的列表标题

TitleInfo参数的传递示例如下,记录的seq代表列的序号,Width代表列宽度占所有列标题加起来宽的的百分比,大家应该可以想到,所有列的Width加起来应该要等于1。TitleLabel是列标题的文本,ShowSortIcon设置为true的时候展示排序图标,否则不显示,因为有的列不支持排序。SortColumn代表排序列名,对于Dataverse而言是表的列的逻辑名称。

Table(
{
Seq:1,
Width:0.2,
TitleLabel: "客户名称",
ShowSortIcon:true,
SortColumn:"name"
},
{
Seq:2,
Width:0.2,
TitleLabel: "电话",
ShowSortIcon:true,
SortColumn:"telephone1"
},
{
Seq:3,
Width:0.3,
TitleLabel: "主要联系人",
ShowSortIcon:true,
SortColumn:"primarycontactid"
},
{
Seq:4,
Width:0.3,
TitleLabel: "主要联系人邮箱",
ShowSortIcon:false,
SortColumn:""
}
)

DefaultSortByColumn代表默认的排序列,DefualtSortByAsc代表默认是否升序排列。这两个传递进来是为了在用户没有更改排序的时候可以知道默认是按照哪个列进行排序,会有图标展示的。

两个输出参数很好理解,就是告诉外面的关联的数据源我要求按照什么列,是升序还是降序排列。我也为这两个输出参数分别设置了默认值如下:

If(
IsBlank(gblSortByColumn),
TableTitleComponent.DefaultSortByColumn,
gblSortByColumn
)

If(
IsBlank(gblSortByAsc),
TableTitleComponent.DefaultSortByAsc,
gblSortByAsc
)

使用Component Library制作一个带排序功能的列表标题

TableTitleComponent 这个component的Fill属性我设置为 TableTitleComponent.BackgroundColor ,这个用来接受参数设置列表标题的背景颜色。

然后我做了5组控件,因为我这是示例只做了5组,当然可以做更多组。每组分成三个控件,一个Label控件用来展示列标题,一个Icon控件用来展示点击可以进行排序的图标,另外一个Icon控件用来展示是升序还是降序。

第一组 lblTitle1 的 Text属性我设置为 LookUp(TableTitleComponent.TitleInfo,Seq = 1,TitleLabel) ,Visible我设置为 !IsEmpty(LookUp(TableTitleComponent.TitleInfo,Seq = 1)),Width设置为 Parent.Width * LookUp(TableTitleComponent.TitleInfo,Seq = 1,Width) ,Height设置为 Parent.Height ,X设置为0,Y设置为0,Align设置为Center,列标题一般会让其居中,当然看习惯,也可以居左,FontWeight设置为 FontWeight.Bold 。

第一组 icoSort1 的 Visible属性设置为 LookUp(TableTitleComponent.TitleInfo,Seq = 1,ShowSortIcon),X属性设置为 lblTitle1.Width - 50 ,Y属性设置为 5 , OnSelect属性我设置为:

If(
IsBlank(gblSortByColumn),
Set(
gblSortByAsc,
!TableTitleComponent.SortByAsc
),
Set(
gblSortByAsc,
!gblSortByAsc
)
);
Set(
gblSortByColumn,
LookUp(
TableTitleComponent.TitleInfo,
Seq = 1,
SortColumn
)
);

第一组 icoSortIndicator1 的 X属性我设置为 lblTitle1.Width - 25,Y属性设置为 5,Visible属性设置为:

If(
IsBlank(gblSortByColumn) && !IsBlank(TableTitleComponent.DefaultSortByColumn) && TableTitleComponent.DefaultSortByColumn = LookUp(
TableTitleComponent.TitleInfo,
Seq = 1,
SortColumn
),
true,
If(
!IsBlank(gblSortByColumn) && gblSortByColumn = LookUp(
TableTitleComponent.TitleInfo,
Seq = 1,
SortColumn
),
true,
false
)
)

Icon 属性设置为:

If(
IsBlank(gblSortByAsc) && TableTitleComponent.DefaultSortByAsc,
Icon.ChevronUp,
If(
gblSortByAsc,
Icon.ChevronUp,
Icon.ChevronDown
)
)

第二组的控件,对于Lable控件就是要注意其 X属性的值设置为:lblTitle1.X + lblTitle1.Width ,注意这种写法,后面的Lable控件的X也是类似写法,这样确保单元格之间横向是挨着的。其他的属性参考设置即可。

这个Component Library做好之后,我们实际来使用下。在一个屏幕中插入这个组件后,我们在它的下面插入一个Gallery,这个Gallery的Items属性的写法示例如下:

SortByColumns(
Accounts,
TableTitleComponent_1.SortByColumn,
If(
TableTitleComponent_1.SortByAsc,
Ascending,
Descending
)
)

这个Componet Library的参数设置如下:

使用Component Library制作一个带排序功能的列表标题

发表评论

相关文章