UI Configuration in CoFX
Download as PPTX, PDF0 likes381 views
The document provides an overview of the UI configuration in the CoFx platform, detailing how to configure lists and forms effectively for time tracking in the Time Cockpit application. It includes instructions on using predefined filters, custom cell types, and creating hyperlinks to navigate between forms and lists. Furthermore, it explains advanced topics like dynamic filtering and using Python as a data source for lists.
![Lists and TCQL
• TCQL queries with New With (=anonymous result)
– EditModelEntityName
Name of the entity that should be opened if user wants to edit an object
– EditProperty
Name of the property in the resulting object that contains the primary key (=GUID)
of the object that should be opened for edit
• Use CDATA for large TCQL queries
<List AllowDelete="True" AllowEdit="True" …>
<List.Query>
<![CDATA[
From P In Project
Where P.Customer.Country.CountryName = "Deutschland"
Select P
]]>
</List.Query>
<BoundCell Content="=Current.APP_Code" />
<BoundCell Content="=Current.APP_Description" />
</List>
10](https://image.slidesharecdn.com/20121001cofxuiconfiguration-121001021733-phpapp02/85/UI-Configuration-in-CoFX-10-320.jpg)
![LISTS
Python as Data Source for List
<List AllowDelete="True" AllowEdit="True" EditModelEntityName="APP_Vacation" EditProperty="VacationUuid" …>
<List.ScriptSource><sys:String xml:space="preserve">
clr.AddReference("System.Core")
import System
clr.ImportExtensions(System.Linq)
def getItems(context, queryParameters):
vacation = context.SelectWithParams({
"Query": "From V In … Where V.APP_UserDetail.APP_UserDetailUuid = @UserDetail Select New With { … }",
"QueryParameters": queryParameters })
vacationEntitlement = context.SelectWithParams(…)
if vacation.Count == 0 and vacationEntitlement.Count == 0:
vacationEntitlement = context.SelectWithParams(…)
return vacation.Concat(vacationEntitlement).OrderBy(lambda t: t.EndTime).Cast[EntityObject]()
</sys:String></List.ScriptSource>
<List.Filter><Form ModelEntityName="APP_Vacation"><Tab Header="Filter"><Section><SectionColumn>
<RelationCell FilterParameterName="UserDetail" Condition="Current.APP_IsHidden = False"
FilterPath="APP_UserDetail" FilterIsMandatory="True" SelectFirstIfNew="True"
DefaultValue="=Environment.CurrentUser.Me" />
</SectionColumn></Section></Tab></Form></List.Filter>
<BoundCell Content="=Current.UserDetail" Header="Mitarbeiter" />
…
</List>
31](https://image.slidesharecdn.com/20121001cofxuiconfiguration-121001021733-phpapp02/85/UI-Configuration-in-CoFX-31-320.jpg)
![FORMS
FileCell (Continued)
# Avatar file property.
allowedMimeTypes = List[String]()
allowedMimeTypes.Add("image/jpeg")
allowedMimeTypes.Add("image/png")
allowedExtensions = List[String]()
allowedExtensions.Add(".png")
allowedExtensions.Add(".jpeg")
allowedExtensions.Add(".jpg")
fileProperty = FileProperty({
"Name": "USR_Avatar", "InvariantFriendlyName": "Avatar",
"FileNameColumn": "USR_AvatarFileName",
"FileSizeColumn": "USR_AvatarFileSize",
"FileMimeTypeColumn": "USR_AvatarMimeType",
"MaxFileSizeInKB" : 128, "IsNullable" : True,
Compress and/or
"AllowedMimeTypes" : allowedMimeTypes,
encrypt
"AllowedExtensions" : allowedExtensions,
"ContentProcessing": ContentProcessing.Compress
})
contactEntity.Properties.Add(fileProperty)
34](https://image.slidesharecdn.com/20121001cofxuiconfiguration-121001021733-phpapp02/85/UI-Configuration-in-CoFX-34-320.jpg)
UI Configuration in CoFX
- 1. UI Configuration in CoFX Configuring Lists and Forms in CoFX and time cockpit Publishing Date: Oct. 1st 2012
- 2. INTRODUCTION Introduction • software architects gmbh Birkenweg 16 4060 Leonding Austria • Contact Web: http://www.timecockpit.com Phone: +43 720 890280 Email: office@timecockpit.com
- 3. ABOUT TIME COCKPIT is the leading time tracking solution for knowledge workers. Graphical time tracking calendar, automatic tracking of your work using signal trackers, high level of extensibility and customizability, full support to work offline, and SaaS deployment model make it the optimal choice especially in the IT consulting business. Try for free and without any risk. You can get your trial account at http://www.timecockpit.com. After the trial period you can use for only 0,20€ per user and month without a minimal subscription time and without a minimal number of users.
- 4. ÜBER TIME COCKPIT ist die führende Projektzeiterfassung für Knowledge Worker. Grafischer Zeitbuchungskalender, automatische Tätigkeitsaufzeichnung über Signal Tracker, umfassende Erweiterbarkeit und Anpassbarkeit, volle Offlinefähigkeit und einfachste Verwendung durch SaaS machen es zur Optimalen Lösung auch speziell im IT-Umfeld. Probieren Sie kostenlos und ohne Risko einfach aus. Einen Testzugang erhalten Sie unter http://www.timecockpit.com. Danach nutzen Sie um nur 0,20€ pro Benutzer und Tag ohne Mindestdauer und ohne Mindestbenutzeranzahl.
- 5. INTRODUCTION UI Configuration Elements • Lists – Predefined filters (=form) – Grouping – Columns • Forms – Tabs – Sections – Fields 5
- 6. Lists Lists In CoFX – Introduction 6
- 7. LISTS Lists In CoFX Form with predefined filters Grouping Column order
- 8. LISTS Basic List TCQL <List AllowDelete="True" AllowEdit="True" Query="From Current In APP_Timesheet.Include(*) Order By Current.APP_BeginTime Select Current" xmlns="…" > <BoundCell Content="=Current.APP_UserDetail" /> <BoundCell Content="=Current.APP_Project.APP_Customer" /> <BoundCell Content="=Current.APP_Project.APP_Code" /> <BoundCell Content="=Current.APP_Task.APP_Code" /> <BoundCell Content="=Current.APP_BeginTime" /> <BoundCell Content="=Current.APP_EndTime" /> <BoundCell Content="=Current.APP_Description" /> <BoundCell AggregateFunction="Sum" Content="=Current.APP_DurationInHours" /> <BoundCell Content="=Current.APP_HourlyRateActual" /> <BoundCell AggregateFunction="Sum" Content="=Current.APP_Revenue" /> </List> 8
- 9. LISTS List Definitions • Data source is defined using TCQL queries – See time cockpit documentation for description of TCQL – Use TCQL Order By clause for default sorting • Lists can be read only or read/write – AllowDelete, AllowEdit • Cell types and properties are derived from model definition – Possible to override default behavior – See cell types in chapter about forms 9
- 10. Lists and TCQL • TCQL queries with New With (=anonymous result) – EditModelEntityName Name of the entity that should be opened if user wants to edit an object – EditProperty Name of the property in the resulting object that contains the primary key (=GUID) of the object that should be opened for edit • Use CDATA for large TCQL queries <List AllowDelete="True" AllowEdit="True" …> <List.Query> <![CDATA[ From P In Project Where P.Customer.Country.CountryName = "Deutschland" Select P ]]> </List.Query> <BoundCell Content="=Current.APP_Code" /> <BoundCell Content="=Current.APP_Description" /> </List> 10
- 11. LISTS Important Cell Properties • Content – TCQL expression – Use Current to access current row • Foreground – Foreground color for the cell – TCQL expression for conditional formatting – E.g. Foreground="=:Iif(Current.Budget = Null, 'Red', 'Black')" • Header – Column header • Hyperlink (details see later) • MaxWidth, MinWidth, Width • AggregateFunction – None, Sum, Average, Minimum, Maximum • Specific cell types see later 11
- 12. LISTS List With Grouping <List …> <List.Groups> <Group AutoExpand="True" MemberPath="APP_UserDetail" SortDirection="Ascending" /> </List.Groups> <BoundCell Content="=Current.APP_Description" /> <BoundCell Content="=Current.APP_Location" /> <BoundCell AggregateFunction="Sum" Content="=Current.APP_DurationInHours" /> </List> 12
- 13. Forms Forms In CoFX 13
- 14. FORMS Header Lists In CoFX Tabs Section Multi column Calculated property (read only)
- 15. FORMS Basic Form <Form ModelEntityName="APP_Project" xmlns="…"> <Tab Header="Project"> <Section Header="General"> <SectionColumn> <RelationCell ColSpan="2" Content="=Current.APP_Customer" DisplayProperty="APP_CompanyName" List="APP_DefaultCustomerList" /> <BoundCell ColSpan="2" Content="=Current.APP_Code" /> <BoundCell ColSpan="2" Content="=Current.APP_ProjectName" /> <BoundCell ColSpan="2" Content="=Current.APP_ExternalProjectCode" /> <BoundCell Content="=Current.APP_StartDate" /> <BoundCell ColSpan="2" Content="=Current.APP_Description" /> <BoundCell ColSpan="2" Content="=Current.APP_Closed" /> </SectionColumn> <SectionColumn> <BoundCell Content="=Current.APP_EndDate" /> </SectionColumn> </Section> <Section Header="Budget"> … </Section> </Tab> <BackReferenceTab BackReference="Invoices" /> </Form> 15
- 16. FORMS Cell Types • By default cell type and cell properties derived from model (BoundCell) • Customizable Cell Type Description BooleanCell Checkbox DateCell Date picker DateTimeCell Date picker plus text box for time DurationCell Date picker plus two text boxes for begin and end time FileCell Possibility to upload a file (e.g. for attachments) NumericCell Text box for entering numeric values RelationCell Combobox for n:1 relations TextCell Text box UrlCell Text box for entering URLs (with hyperlink functionality in browser); currently only supported in Silverlight version GuidCell Text box for entering GUIDs (only for admin UIs) ActionCell Work in progress; not finished yet BinaryCell For internal purposes only 16
- 17. FORMS Important Cell Properties • Same as for lists (see chapter about lists) • Additionally – DefaultValue • TCQL expression – ColSpan 17
- 18. FORMS Date And Time • DateCell – Use if you want the user to enter only date – DateTimeFormatPattern – DefaultDate (stored in the DB if the user does not select a date; e.g. write 2099-12-31 instead of null) – Possibility to mark special dates (List, ListDateProperty, Condition; details not covered here) • DateTimeCell – Ancestor of DateCell – Use if you want the user to enter date + time – ShowTime controls whether time part can be entered by user – ShowTime accepts bool or TCQL expression (e.g. enter time only if expression is true) 18
- 19. FORMS Duration • DurationCell • BeginTime – TCQL expression identifying the property in which begin time should be stored • EndTime – TCQL expression identifying the property in which end time should be stored 19
- 20. FORMS Duration Cell <Form ModelEntityName="APP_Timesheet" xmlns="…"> <Tab Header="Zeitbuchung"> <Section Header="Allgemein"> <SectionColumn> <DurationCell BeginTime="=Current.APP_BeginTime" EndTime="=Current.APP_EndTime" Header="Zeitraum" /> <BoundCell Content="=Current.APP_Description" /> <BoundCell Content="=Current.APP_Location" /> </SectionColumn> </Section> … 20
- 21. FORMS Numbers • NumericCell • NumberFormatPattern – Accepts string or TCQL expression 21
- 22. FORMS Text • TextCell • Height – Defines the height of the input control • MaxLength – Maximum length in characters 22
- 23. FORMS Relations • RelationCell • Condition – Used to implement dependent combo boxes (see following example) • DisplayProperty – Used to determine which property of the list (see List property) to show in the combo box • List – Identifies the list that should be used in the combo box • SelectFirstIfNew – Indicates whether the first item in the list should be automatically selected when adding new items • ShowListAllowed – Indicates whether it is allowed for the user to start lookup dialog (i.e. whether "…" button is visible) 23
- 24. Lists & Forms Advanced Topics 24
- 25. LISTS Hyperlinks • Enable navigation from list to forms (n:1 relations) or to other lists (1:n relations) – Hyperlinks to custom C# components are possible (not covered here) • Hyperlinks to forms – Form is opened as model dialog (default behavior) – NavigateContent = NamedFormConfiguration – Pass UUID of element to open in EntityObjectUuid – Pass entity name to open in ModelEntityName • Hyperlinks to lists – List is opened in screen are defined in Hyperlink.Target – NavigateContent = NamedListConfiguration – Pass entity name to open in ModelEntityName – Pass filter parameters in NamedListConfiguration.Parameters 25
- 26. LISTS Hyperlinks <List xmlns:p=http://www.timecockpit.com/2009/ui/controls …> <BoundCell Content="=Current.APP_UserDetail"> <BoundCell.Hyperlink> <Hyperlink Target="APP_UserDetailForm" Title="=Current.APP_UserDetail"> Hyperlink to a <Hyperlink.NavigateContent> form <p:NamedFormConfiguration EntityObjectUuid="=Current.APP_UserDetail.APP_UserDetailUuid" ModelEntityName="APP_UserDetail"> <p:NamedFormConfiguration.Parameters> <ParameterCollection /> </p:NamedFormConfiguration.Parameters> </p:NamedFormConfiguration> </Hyperlink.NavigateContent> </Hyperlink> </BoundCell.Hyperlink> </BoundCell> <BoundCell Content="=Current.APP_Project.APP_Customer" /> <BoundCell Content="=Current.APP_Project.APP_Code" /> … </List> 26
- 27. LISTS Hyperlinks <List …> <BoundCell Content="Projekte"> <BoundCell.Hyperlink> <Hyperlink Target="FilteredProjectList" Title="= 'Projekte'"> Hyperlink to a list <Hyperlink.NavigateContent> <p:NamedListConfiguration ModelEntityName="APP_Project"> <p:NamedListConfiguration.Parameters> <Parameter Name="Customer" Value="=Current.CustomerUuid" /> </p:NamedListConfiguration.Parameters> </p:NamedListConfiguration> </Hyperlink.NavigateContent> Pass filter Filter parameter parameter to list </Hyperlink> name (see filter </BoundCell.Hyperlink> forms) </BoundCell> <BoundCell Content="=Current.APP_Project.APP_Customer" /> <BoundCell Content="=Current.APP_Project.APP_Code" /> … </List> 27
- 28. LISTS Filters • Uses form definition language • Dynamically added where clauses – Specify FilterOperator and FilterPath – Adds a "And <FilterPath> <FilterOperator> <SelectedValue>" clause to TCQL – Optionally define FilterParameterName for passing filter value from hyperlinks • Parameters in TCQL statement – Specify FilterParameterName without FilterOperator and FilterPath – Parameter can be used in TCQL statement – Note: Query optimization is done automatically (e.g. "Or @Param = Null" whole condition is removed if @Param is null) 28
- 29. LISTS List With Filters <List Query="From Current In APP_Timesheet.Include(*) Where (Current.APP_BeginTime >= @BeginTime Or @BeginTime = Null) And (:AddDays(Current.APP_EndTime, -1) <= @EndTime Or @EndTime = Null) Order By Current.APP_BeginTime Select Current" …> <List.Filter> <Form> <Tab Header="Filter"><Section> <SectionColumn> <RelationCell DisplayProperty="APP_Fullname" FilterOperator="=" FilterParameterName="UserDetail" FilterPath="APP_UserDetail" List="APP_DefaultUserDetailList" /> <RelationCell DisplayProperty="APP_CompanyName" FilterOperator="=" FilterPath="APP_Project.APP_Customer" List="APP_DefaultCustomerList" /> <BoundCell FilterOperator="=" FilterParameterName="Project" FilterPath="APP_Project" /> … </SectionColumn> <SectionColumn> <TextCell FilterOperator="Like" FilterPath="APP_Description" /> <DateTimeCell FilterParameterName="BeginTime" Header="Von"> <DateTimeCell.ShowTime> <x:Boolean>False</x:Boolean> </DateTimeCell.ShowTime> </DateTimeCell> </SectionColumn> </Section></Tab> </Form> </List.Filter> … </List> 29
- 30. LISTS List With Filters <BoundCell Content="Zeitbuchungen"> <BoundCell.Hyperlink> <Hyperlink Target="FilteredTimesheetList" Title="Zeitbuchungen"> <Hyperlink.NavigateContent> <p:NamedListConfiguration ModelEntityName="APP_Timesheet"> <p:NamedListConfiguration.Parameters> <Parameter Name="UserDetail" Value="=Current.UserDetailUuid" /> </p:NamedListConfiguration.Parameters> </p:NamedListConfiguration> </Hyperlink.NavigateContent> </Hyperlink> </BoundCell.Hyperlink> </BoundCell> <List.Filter> <Form> <Tab Header="Filter"><Section> <SectionColumn> <RelationCell DisplayProperty="APP_Fullname" FilterOperator="=" FilterParameterName="UserDetail" FilterPath="APP_UserDetail" List="APP_DefaultUserDetailList" /> … </List> 30
- 31. LISTS Python as Data Source for List <List AllowDelete="True" AllowEdit="True" EditModelEntityName="APP_Vacation" EditProperty="VacationUuid" …> <List.ScriptSource><sys:String xml:space="preserve"> clr.AddReference("System.Core") import System clr.ImportExtensions(System.Linq) def getItems(context, queryParameters): vacation = context.SelectWithParams({ "Query": "From V In … Where V.APP_UserDetail.APP_UserDetailUuid = @UserDetail Select New With { … }", "QueryParameters": queryParameters }) vacationEntitlement = context.SelectWithParams(…) if vacation.Count == 0 and vacationEntitlement.Count == 0: vacationEntitlement = context.SelectWithParams(…) return vacation.Concat(vacationEntitlement).OrderBy(lambda t: t.EndTime).Cast[EntityObject]() </sys:String></List.ScriptSource> <List.Filter><Form ModelEntityName="APP_Vacation"><Tab Header="Filter"><Section><SectionColumn> <RelationCell FilterParameterName="UserDetail" Condition="Current.APP_IsHidden = False" FilterPath="APP_UserDetail" FilterIsMandatory="True" SelectFirstIfNew="True" DefaultValue="=Environment.CurrentUser.Me" /> </SectionColumn></Section></Tab></Form></List.Filter> <BoundCell Content="=Current.UserDetail" Header="Mitarbeiter" /> … </List> 31
- 32. FORMS Relations – Dependent Combo Boxes <Form ModelEntityName="APP_Timesheet" xmlns="…"> <Tab Header="Zeitbuchung"> If user did not <Section Header="Project"> already select a project… <SectionColumn> <BoundCell Content="=Current.APP_Project" /> <RelationCell Condition="=:Iif(Current.Project = Null, …otherwise add a …show an empty '1 = 0', condition to only combo box for display tasks of this tasks… project 'Current.Project.ProjectUuid={' + Current.Project.ProjectUuid + '}')" Content="=Current.APP_Task" /> </SectionColumn> </Section> … Defines content of combo box Project Task 32
- 33. FORMS FileCell # Avatar File Name fileNameProperty = TextProperty({ "Name": "USR_AvatarFileName", "InvariantFriendlyName":"Avatar File Name", "MaxStorageSize" : 256, "IsNullable" : True, "IsDefaultDisplayProperty" : False, "DefaultValueExpression" : """", "Ownership" : Ownership.User }) contactEntity.Properties.Add(fileNameProperty) # Avatar File Mime Type mimeTypeProperty = TextProperty({ "Name": "USR_AvatarMimeType", "InvariantFriendlyName":"Avatar Mime Type", "MaxStorageSize" : 256, "IsNullable" : True, "IsDefaultDisplayProperty" : False, "DefaultValueExpression" : """", "Ownership" : Ownership.User }) contactEntity.Properties.Add(mimeTypeProperty) # Avatar File Size fileSizeProperty = NumericProperty({ "Name": "USR_AvatarFileSize", "InvariantFriendlyName":"Avatar File Size", "Precision" : 18, "Scale" : 0, "IsNullable" : True, "FormatPattern": "#,###", "IsDefaultDisplayProperty" : False, "DefaultValueExpression" : "0", "Ownership" : Ownership.User }) contactEntity.Properties.Add(fileSizeProperty) 33
- 34. FORMS FileCell (Continued) # Avatar file property. allowedMimeTypes = List[String]() allowedMimeTypes.Add("image/jpeg") allowedMimeTypes.Add("image/png") allowedExtensions = List[String]() allowedExtensions.Add(".png") allowedExtensions.Add(".jpeg") allowedExtensions.Add(".jpg") fileProperty = FileProperty({ "Name": "USR_Avatar", "InvariantFriendlyName": "Avatar", "FileNameColumn": "USR_AvatarFileName", "FileSizeColumn": "USR_AvatarFileSize", "FileMimeTypeColumn": "USR_AvatarMimeType", "MaxFileSizeInKB" : 128, "IsNullable" : True, Compress and/or "AllowedMimeTypes" : allowedMimeTypes, encrypt "AllowedExtensions" : allowedExtensions, "ContentProcessing": ContentProcessing.Compress }) contactEntity.Properties.Add(fileProperty) 34
- 35. FileCell (Continued) List Form 35
- 36. Saves the day. Thank you! Questions? You want more? office@timecockpit.com