緒言
コミュニティのネタとして製作しました。全3回で完結。
使用イメージはこちら。
中身
データソース(SharePointリスト)
Assets
UsageStatus
コピペ用コード
App.Formulas
_TimeTable = AddColumns(
Sequence(48),
TimeValue,
Time(
RoundDown((ThisRecord.Value - 1) / 2,0),
Mod(ThisRecord.Value - 1,2) * 30,
0
)
);
App.OnStart
Set(_ReferenceDay,Today());
With({start:_ReferenceDay},
ClearCollect(dates,
AddColumns(
Sequence(14),
DateValue,
DateAdd(start, ThisRecord.Value - 1, TimeUnit.Days)
)
)
);
Screen
Screens:
ScreenUsage:
Properties:
LoadingSpinnerColor: =RGBA(56, 96, 178, 1)
Children:
- Header:
Control: Header@0.0.44
Properties:
Logo: ='7'
- GalleryAssets:
Control: Gallery@2.15.0
Variant: BrowseLayout_Vertical_TwoTextOneImageVariant_ver5.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =Parent.Height-Self.Y-If(ContainerReserveList.Visible,ContainerReserveList.Height,0)
Items: ='環境変数Assets'
OnSelect: =UpdateContext({_dataCollect:true});
TemplateSize: =70
Width: =435
Y: =75
Children:
- Image2:
Control: Image@2.2.3
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =61
Image: =ThisItem.AssetImage.Small
OnSelect: =Select(Parent)
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Width: =66
X: =18
Y: =4
- Title1:
Control: Label@2.5.1
Properties:
BorderColor: =RGBA(0, 0, 0, 1)
Color: =RGBA(50, 49, 48, 1)
Font: =Font.'Open Sans'
FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal)
Height: =Self.Size * 1.8
OnSelect: =Select(Parent)
PaddingBottom: =0
PaddingLeft: =0
PaddingRight: =0
PaddingTop: =0
Size: =14
Text: |-
=$"装置名: {ThisItem.AssetName}"
VerticalAlign: =VerticalAlign.Top
Width: =Parent.TemplateWidth - 173
X: =111
- Subtitle1:
Control: Label@2.5.1
Properties:
BorderColor: =RGBA(0, 0, 0, 1)
Font: =Font.'Open Sans'
FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal)
Height: =Self.Size * 1.8
OnSelect: =Select(Parent)
PaddingBottom: =0
PaddingLeft: =0
PaddingRight: =0
PaddingTop: =0
Size: =12
Text: |-
="タイプ: "& ThisItem.AssetType
VerticalAlign: =VerticalAlign.Top
Width: =Title1.Width
X: =111
Y: =25
- NextArrow1:
Control: Classic/Icon@2.5.0
Properties:
AccessibleLabel: =Self.Tooltip
BorderColor: =RGBA(0, 0, 0, 1)
Color: =RGBA(166, 166, 166, 1)
DisabledBorderColor: =RGBA(56, 56, 56, 1)
DisabledColor: =RGBA(119, 119, 119, 1)
Height: =50
Icon: =Icon.ChevronRight
OnSelect: =Select(Parent)
PaddingBottom: =16
PaddingLeft: =16
PaddingRight: =16
PaddingTop: =16
Tooltip: ="項目の詳細の表示"
Width: =50
X: =Parent.TemplateWidth - Self.Width - 12
Y: =10
- Separator1:
Control: Rectangle@2.3.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Fill: =RGBA(255, 255, 255, 1)
Height: =8
OnSelect: =Select(Parent)
Width: =Parent.TemplateWidth
Y: =Parent.TemplateHeight - Self.Height
- Rectangle1:
Control: Rectangle@2.3.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Fill: =RGBA(0, 18, 107, 1)
Height: =Parent.TemplateHeight - Separator1.Height
OnSelect: =Select(Parent)
Visible: =ThisItem.IsSelected
Width: =4
- Subtitle1_1:
Control: Label@2.5.1
Properties:
BorderColor: =RGBA(0, 0, 0, 1)
Font: =Font.'Open Sans'
FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal)
Height: =Self.Size * 1.8
OnSelect: =Select(Parent)
PaddingBottom: =0
PaddingLeft: =0
PaddingRight: =0
PaddingTop: =0
Size: =12
Text: |-
=$"管理部署: {ThisItem.Department}, 承認者: {ThisItem.Approver.DisplayName}"
VerticalAlign: =VerticalAlign.Top
Width: =Title1.Width
X: =111
Y: =47
- ContainerReserveList:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
BorderStyle: =BorderStyle.None
BorderThickness: =1
DropShadow: =DropShadow.None
Height: =297
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Visible: =ContainerSchedule.Visible
Width: =435
Y: =471
Children:
- GalleryReserveList:
Control: Gallery@2.15.0
Variant: BrowseLayout_Vertical_OneTextVariant_ver5.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
BorderStyle: =BorderStyle.None
Height: =252
Items: |+
=With(
{periodEnd:Last(dates).DateValue+Time(23,30,0)},
SortByColumns(
Filter(
環境変数UsageStatus,
AssetID=GalleryAssets.Selected.ID,
UsageEnd>=First(dates).DateValue&&UsageStart<=periodEnd
),
"UsageStart",SortOrder.Ascending
)
)
TemplateSize: =35
Width: =435
Y: =44
Children:
- Title3:
Control: Label@2.5.1
Properties:
BorderColor: =RGBA(0, 0, 0, 1)
Color: =RGBA(50, 49, 48, 1)
Font: =Font.'Open Sans'
Height: =32
OnSelect: =Select(Parent)
PaddingBottom: =0
PaddingLeft: =0
PaddingRight: =0
PaddingTop: =0
Size: =14
Text: =$"{Text(ThisItem.UsageStart,"yy/mm/dd hh:mm")}～{Text(ThisItem.UsageEnd,"yy/mm/dd hh:mm")}"
Width: =331
X: =8
- ButtonCanvas2:
Control: Button@0.0.45
Properties:
BasePaletteColor: =RGBA(249, 83, 109, 1)
Icon: ="Delete"
OnSelect: |-
=Remove(環境変数UsageStatus,ThisItem);
Select(GalleryAssets)
Text: ="削除"
X: =318
- Title3_1:
Control: Label@2.5.1
Properties:
BorderColor: =RGBA(0, 0, 0, 1)
Color: =RGBA(50, 49, 48, 1)
Font: =Font.'Open Sans'
Height: =32
OnSelect: =
PaddingBottom: =0
PaddingLeft: =0
PaddingRight: =0
PaddingTop: =0
Size: =14
Text: =$"{GalleryAssets.Selected.AssetName}の予約一覧"
Width: =331
X: =7
Y: =14
- Rectangle5:
Control: Rectangle@2.3.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
DisplayMode: =DisplayMode.View
Fill: =RGBA(56, 96, 178, 1)
Height: =3
Width: =Parent.Width-Self.X*2
X: =5
Y: =7
- ContainerNextInput:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
BorderStyle: =BorderStyle.None
DropShadow: =DropShadow.None
Fill: =RGBA(255, 255, 255, 0.9)
Height: =Parent.Height
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Visible: =_inProgressFlg
Width: =Parent.Width
Children:
- TextCanvas7:
Control: Text@0.0.51
Properties:
Height: =58
Size: =24
Text: ="終了予定日を入力してください"
Weight: ='TextCanvas.Weight'.Bold
Width: =379
X: =40
Y: =272
- ButtonCanvas4_2:
Control: Button@0.0.45
Properties:
Icon: ="Dismiss"
OnSelect: =UpdateContext({_inProgressFlg:false,_start:Blank(),_end:Blank()})
Text: ="cancel"
X: =195
Y: =368
- ContainerSchedule:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
BorderStyle: =BorderStyle.None
DropShadow: =DropShadow.None
Height: =693
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Visible: =!_dataCollect&&!IsEmpty(ColVacancy)
Width: =931
X: =435
Y: =75
Children:
- GalleryDates:
Control: Gallery@2.15.0
Variant: BrowseLayout_Vertical_OneTextVariant_ver5.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =560
Items: =dates
TemplateSize: =IfError(Self.Height/Self.AllItemsCount,1)
Width: =Parent.Width-Self.X
Y: =110
Children:
- Rectangle3_1:
Control: Rectangle@2.3.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
DisplayMode: =DisplayMode.Disabled
Fill: =RGBA(255, 255, 255, 1)
Height: =1
Width: =GalleryTimes.Width
X: =GalleryTimes.X
Y: =Parent.TemplateHeight-Self.Height
- TextCanvas5:
Control: Text@0.0.51
Properties:
FontColor: =Switch(Weekday(ThisItem.DateValue),1,Color.Red,7,Color.Blue)
Height: =39
PaddingLeft: =4
Size: =12
Text: =Text(ThisItem.DateValue,"m/d")&Char(10)&Text(ThisItem.DateValue,"ddd","en")
Width: =50
- TextCanvas6:
Control: Text@0.0.51
Properties:
Text: =ThisItem.DateValue
Visible: =false
X: =40
Y: =8
- GalleryTimes:
Control: Gallery@2.15.0
Variant: BrowseLayout_Horizontal_TwoTextOneImageVariant_ver5.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =Parent.TemplateHeight
Items: =_TimeTable
TemplateSize: =Self.Width/Self.AllItemsCount
Width: =Parent.Width-20-Self.X
X: =50
Children:
- Button1:
Control: Classic/Button@2.2.0
Properties:
BorderColor: =ColorFade(Self.Fill, -15%)
BorderStyle: =BorderStyle.None
Color: =RGBA(255, 255, 255, 1)
DisabledBorderColor: =RGBA(166, 166, 166, 1)
DisplayMode: |+
=DisplayMode.Edit
Fill: |-
=With(
{ref:IfError(DateValue(TextCanvas6.Text),Today())+ThisItem.TimeValue},
If(
Or(ref=_start,ref=_end,And(ref>=_start,ref<=_end)),
Color.Yellow,
If(LookUp(ColVacancy,dt=ref).Vacant=false,Color.Gray,App.Theme.Colors.Lighter30)
)
)
Font: =Font.'Open Sans'
Height: =Parent.Height
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
HoverColor: =RGBA(255, 255, 255, 1)
HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%)
OnSelect: |-
=With(
{selectedDateTime: IfError(DateValue(TextCanvas6.Text),Today()) + ThisItem.TimeValue},
With( // 空き状況をLookUpResultという変数に格納
{LookUpResult: LookUp(ColVacancy, dt = selectedDateTime)},
If(
IsBlank(_start),
If(
// LookUpResultを使って空き状況をチェック
LookUpResult.Vacant = false,
Notify("空きがありません", NotificationType.Warning),
UpdateContext({_start: selectedDateTime, _inProgressFlg: true})
),
UpdateContext({_end: DateAdd(selectedDateTime,25,TimeUnit.Minutes)});
If( // 開始日＞終了日や埋まってる日を含む場合はNG
_end < _start || !IsEmpty(Filter(ColVacancy,dt>=_start&&dt<=_end&&Vacant=false)),
Notify("指定日を見直してください", NotificationType.Warning);
UpdateContext({_end: Blank()}),
UpdateContext({_inProgressFlg: false, _showInput: true})
)
)
)
)
PressedBorderColor: =Self.Fill
PressedColor: =Self.Fill
PressedFill: =Self.Color
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Text: =
Width: =Parent.TemplateWidth
- Rectangle2:
Control: Rectangle@2.3.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
DisplayMode: =DisplayMode.Disabled
Fill: =RGBA(255, 255, 255, 1)
Height: =Parent.TemplateHeight
OnSelect: =Select(Parent)
Width: =1
- GalleryTimeLabel:
Control: Gallery@2.15.0
Variant: BrowseLayout_Horizontal_TwoTextOneImageVariant_ver5.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =21
Items: =_TimeTable
TemplateSize: =Self.Width/Self.AllItemsCount
Width: =GalleryTimes.Width
X: =GalleryTimes.X
Y: =GalleryDates.Y-Self.Height
Children:
- Title4_1:
Control: Label@2.5.1
Properties:
BorderColor: =RGBA(0, 0, 0, 1)
Color: =RGBA(50, 49, 48, 1)
Font: =Font.'Open Sans'
Height: =21
OnSelect: =Select(Parent)
PaddingBottom: =0
PaddingLeft: =0
PaddingRight: =0
PaddingTop: =0
Size: =9
Text: =Text(ThisItem.TimeValue,"h")
VerticalAlign: =VerticalAlign.Top
Visible: =Minute(ThisItem.TimeValue)=0
Width: =17.979166666666668
- ButtonCanvas3:
Control: Button@0.0.45
Group: GroupSelectMonth
Properties:
Appearance: ='ButtonCanvas.Appearance'.Secondary
OnSelect: =Set(_ReferenceDay,Today());Select(ButtonFunction)
Text: =Text(_ReferenceDay,"'yy mm/dd")
Visible: =!_inProgressFlg
X: =417
Y: =44
- ButtonCanvas5:
Control: Button@0.0.45
Group: GroupSelectMonth
Properties:
Appearance: ='ButtonCanvas.Appearance'.Secondary
Icon: ="ChevronLeft"
Layout: ='ButtonCanvas.Layout'.IconOnly
OnSelect: =Set(_ReferenceDay,DateAdd(_ReferenceDay,-7,TimeUnit.Days));Select(ButtonFunction)
Visible: =!_inProgressFlg
Width: =32
X: =385
Y: =44
- ButtonCanvas5_1:
Control: Button@0.0.45
Group: GroupSelectMonth
Properties:
Appearance: ='ButtonCanvas.Appearance'.Secondary
Icon: ="ChevronRight"
Layout: ='ButtonCanvas.Layout'.IconOnly
OnSelect: =Set(_ReferenceDay,DateAdd(_ReferenceDay,7,TimeUnit.Days));Select(ButtonFunction)
Visible: =!_inProgressFlg
Width: =32
X: =513
Y: =44
- TextCanvas3:
Control: Text@0.0.51
Properties:
Size: =20
Text: =GalleryAssets.Selected.AssetName&"の予約"
Width: =363
X: =568
Y: =44
- Rectangle4:
Control: Rectangle@2.3.0
Properties:
BorderColor: =RGBA(0, 0, 0, 1)
BorderThickness: =1
DisplayMode: =DisplayMode.View
Fill: =App.Theme.Colors.Lighter30
Height: =21
Width: =21
X: =40
Y: =40
- Rectangle4_1:
Control: Rectangle@2.3.0
Properties:
BorderColor: =RGBA(0, 0, 0, 1)
BorderThickness: =1
DisplayMode: =DisplayMode.View
Fill: =Color.Yellow
Height: =21
Width: =21
X: =125
Y: =40
- Rectangle4_2:
Control: Rectangle@2.3.0
Properties:
BorderColor: =RGBA(0, 0, 0, 1)
BorderThickness: =1
DisplayMode: =DisplayMode.View
Fill: =Color.Gray
Height: =21
Width: =21
X: =210
Y: =40
- TextCanvas9:
Control: Text@0.0.51
Properties:
Height: =21
PaddingLeft: =5
Text: ="空"
VerticalAlign: =VerticalAlign.Middle
Width: =64
X: =61
Y: =40
- TextCanvas9_1:
Control: Text@0.0.51
Properties:
Height: =21
PaddingLeft: =5
Text: ="選択中"
VerticalAlign: =VerticalAlign.Middle
Width: =64
X: =146
Y: =40
- TextCanvas9_2:
Control: Text@0.0.51
Properties:
Height: =21
PaddingLeft: =5
Text: ="予定有り"
VerticalAlign: =VerticalAlign.Middle
Width: =64
X: =233
Y: =40
- ContainerInput:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
BorderStyle: =BorderStyle.None
DropShadow: =DropShadow.None
Fill: =RGBA(255, 255, 255, 0.8)
Height: =Parent.Height
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Visible: =_showInput
Width: =Parent.Width
Children:
- ButtonCanvas4:
Control: Button@0.0.45
Properties:
Icon: ="Dismiss"
OnSelect: =UpdateContext({_showInput:false,_start:Blank(),_end:Blank()})
Text: ="cancel"
X: =640
Y: =446
- TextCanvas2:
Control: Text@0.0.51
Properties:
Text: =GalleryAssets.Selected.AssetName
X: =512
Y: =344
- TextCanvas4:
Control: Text@0.0.51
Properties:
Height: =34
Text: |-
=$"予約開始日時: {_start}"
Width: =278
X: =512
Y: =376
- TextCanvas4_1:
Control: Text@0.0.51
Properties:
Height: =25
Text: |-
=$"予約終了日時: {_end}"
Width: =278
X: =512
Y: =410
- ButtonCanvas4_1:
Control: Button@0.0.45
Properties:
Icon: ="Checkmark"
OnSelect: |-
=If(
IsEmpty(Filter(環境変数UsageStatus,AssetID=GalleryAssets.Selected.ID&&UsageStart<=_end&&UsageEnd>=_start)),
Patch(
環境変数UsageStatus,
Defaults(環境変数UsageStatus),
{
AssetID:GalleryAssets.Selected.ID,
UsageStart:_start,
UsageEnd:_end
}
);
Patch(
ColUsage,
Defaults(ColUsage),
{
AssetID:GalleryAssets.Selected.ID,
UsageStart:_start,
UsageEnd:_end
}
),
Notify("重複が発生して予約できませんでした",NotificationType.Error)
);
UpdateContext({_showInput:false,_start:Blank(),_end:Blank()});
Select(GalleryAssets)
Text: ="予約"
X: =512
Y: =446
- ContainerWaiting:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
BorderStyle: =BorderStyle.None
DropShadow: =DropShadow.None
Fill: =RGBA(255, 255, 255, 0.8)
Height: =768
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Visible: =_dataCollect
Width: =1366
Children:
- Spinner1:
Control: Spinner@1.4.6
Properties:
Label: ="お待ちください"
LabelPosition: ='Spinner.LabelPosition'.Below
SpinnerSize: ='Spinner.SpinnerSize'.Huge
X: =Parent.Width/2-Self.Width/2
Y: =Parent.Height/2-Self.Height/2
- ButtonFunction:
Control: Button@0.0.45
Properties:
Appearance: ='ButtonCanvas.Appearance'.Secondary
Height: =40
OnSelect: |-
=With({start:_ReferenceDay},
ClearCollect(dates,
AddColumns(
Sequence(14),
DateValue,
DateAdd(start, ThisRecord.Value - 1, TimeUnit.Days)
)
)
);
Select(GalleryAssets);
Text: ="関数ボタン"
X: =510
Y: =-45
- TimerDataCollect:
Control: Timer@2.1.0
Properties:
BorderColor: =ColorFade(Self.Fill, -15%)
Color: =RGBA(255, 255, 255, 1)
DisabledBorderColor: =ColorFade(Self.BorderColor, 70%)
DisabledColor: =ColorFade(Self.Fill, 90%)
DisabledFill: =ColorFade(Self.Fill, 70%)
Duration: =100
Fill: =RGBA(56, 96, 178, 1)
Font: =Font.'Open Sans'
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
HoverColor: =RGBA(255, 255, 255, 1)
HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%)
OnTimerEnd: |-
=Concurrent(
ClearCollect(
ColUsage,
With(
{periodEnd:Last(dates).DateValue+Time(23,30,0)},
Filter(
環境変数UsageStatus,
AssetID=GalleryAssets.Selected.ID,
UsageEnd>=First(dates).DateValue&&UsageStart<=periodEnd
)
)
),
ClearCollect(
ColVacancy,
AddColumns(
Sequence(CountRows(dates)*CountRows(_TimeTable),1,1),
dt,DateAdd(First(dates).DateValue,30*(ThisRecord.Value-1),TimeUnit.Minutes),
Vacant,true
)
)
);
ForAll(
ColUsage As rec,
UpdateIf(
ColVacancy,
dt>=rec.UsageStart&&dt<=rec.UsageEnd,
{Vacant:false}
)
);
UpdateContext({_dataCollect:false});
OnTimerStart: =
PressedBorderColor: =Self.Fill
PressedColor: =Self.Fill
PressedFill: =Self.Color
Start: =_dataCollect
Text: ="データ取得Timer"
X: =619
Y: =-45