UI Configuration in CoFXConfiguring Lists and Forms in CoFX and time cockpitPublishing Date: Oct. 1st 2012
INTRODUCTIONIntroduction• software architects gmbh  Birkenweg 16  4060 Leonding  Austria• Contact  Web: http://www.timecoc...
ABOUT TIME COCKPIT            is the leading time tracking solution for knowledge workers.Graphical time tracking calendar...
ÜBER TIME COCKPIT           ist die führende Projektzeiterfassung für Knowledge Worker.Grafischer Zeitbuchungskalender, au...
INTRODUCTIONUI Configuration Elements• Lists   – Predefined filters (=form)   – Grouping   – Columns• Forms   – Tabs   – S...
ListsLists In CoFX – Introduction                               6
LISTSLists In CoFX                   Form with                predefined filters                              Grouping    ...
LISTSBasic List                                                     TCQL<List AllowDelete="True" AllowEdit="True"  Query="...
LISTSList Definitions• Data source is defined using TCQL queries   – See time cockpit documentation for description of TCQ...
Lists and TCQL•   TCQL queries with New With (=anonymous result)     – EditModelEntityName       Name of the entity that s...
LISTSImportant Cell Properties•   Content     – TCQL expression     – Use Current to access current row•   Foreground     ...
LISTSList With Grouping<List …>  <List.Groups>    <Group AutoExpand="True"           MemberPath="APP_UserDetail"          ...
FormsForms In CoFX                13
FORMS                HeaderLists In CoFXTabs                                 Section                         Multi column ...
FORMSBasic Form<Form ModelEntityName="APP_Project" xmlns="…">  <Tab Header="Project">    <Section Header="General">      <...
FORMSCell Types•   By default cell type and cell properties derived from model (BoundCell)•   Customizable     Cell Type  ...
FORMSImportant Cell Properties• Same as for lists (see chapter about lists)• Additionally  – DefaultValue     • TCQL expre...
FORMSDate And Time• DateCell  – Use if you want the user to enter only date  – DateTimeFormatPattern  – DefaultDate (store...
FORMSDuration• DurationCell• BeginTime  – TCQL expression identifying the property in    which begin time should be stored...
FORMSDuration Cell<Form ModelEntityName="APP_Timesheet" xmlns="…">  <Tab Header="Zeitbuchung">    <Section Header="Allgeme...
FORMSNumbers• NumericCell• NumberFormatPattern – Accepts string or TCQL expression                                        21
FORMSText• TextCell• Height  – Defines the height of the input control• MaxLength  – Maximum length in characters         ...
FORMSRelations•   RelationCell•   Condition    – Used to implement dependent combo boxes (see following example)•   Displa...
Lists & Forms Advanced Topics                                24
LISTSHyperlinks• Enable navigation from list to forms (n:1 relations) or to other lists (1:n  relations)    – Hyperlinks t...
LISTSHyperlinks<List xmlns:p=http://www.timecockpit.com/2009/ui/controls …> <BoundCell Content="=Current.APP_UserDetail"> ...
LISTSHyperlinks<List …>  <BoundCell Content="Projekte">    <BoundCell.Hyperlink>      <Hyperlink Target="FilteredProjectLi...
LISTSFilters• Uses form definition language• Dynamically added where clauses   – Specify FilterOperator and FilterPath   –...
LISTSList With Filters<List Query="From Current In APP_Timesheet.Include(*)  Where (Current.APP_BeginTime &gt;= @BeginTime...
LISTSList With Filters<BoundCell Content="Zeitbuchungen">  <BoundCell.Hyperlink>    <Hyperlink Target="FilteredTimesheetLi...
LISTSPython as Data Source for List<List AllowDelete="True" AllowEdit="True" EditModelEntityName="APP_Vacation" EditProper...
FORMSRelations – Dependent Combo Boxes<Form ModelEntityName="APP_Timesheet" xmlns="…">  <Tab Header="Zeitbuchung">        ...
FORMSFileCell# Avatar File NamefileNameProperty = TextProperty({         "Name": "USR_AvatarFileName", "InvariantFriendlyN...
FORMSFileCell (Continued)# Avatar file property.allowedMimeTypes = List[String]()allowedMimeTypes.Add("image/jpeg")allowed...
FileCell (Continued)                       List            Form                              35
Saves the day.Thank you!Questions? You want more?office@timecockpit.com
Upcoming SlideShare
Loading in...5
×

UI Configuration in CoFX

374

Published on

CoFX is the framework behind time cockpit (http://www.timecockpit.com). Learn about how to extend and customize lists and forms in time cockpit.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
374
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

UI Configuration in CoFX

  1. 1. UI Configuration in CoFXConfiguring Lists and Forms in CoFX and time cockpitPublishing Date: Oct. 1st 2012
  2. 2. INTRODUCTIONIntroduction• software architects gmbh Birkenweg 16 4060 Leonding Austria• Contact Web: http://www.timecockpit.com Phone: +43 720 890280 Email: office@timecockpit.com
  3. 3. ABOUT TIME COCKPIT is the leading time tracking solution for knowledge workers.Graphical time tracking calendar, automatic tracking of your work usingsignal trackers, high level of extensibility and customizability, full supportto work offline, and SaaS deployment model make it the optimal choiceespecially in the IT consulting business.Try for free and without any risk. You can get your trialaccount at http://www.timecockpit.com. After the trial period you can use for only 0,20€ per user and month without a minimalsubscription time and without a minimal number of users.
  4. 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, volleOfflinefähigkeit und einfachste Verwendung durch SaaS machen es zurOptimalen Lösung auch speziell im IT-Umfeld.Probieren Sie kostenlos und ohne Risko einfach aus. EinenTestzugang erhalten Sie unter http://www.timecockpit.com. Danachnutzen Sie um nur 0,20€ pro Benutzer und Tag ohneMindestdauer und ohne Mindestbenutzeranzahl.
  5. 5. INTRODUCTIONUI Configuration Elements• Lists – Predefined filters (=form) – Grouping – Columns• Forms – Tabs – Sections – Fields 5
  6. 6. ListsLists In CoFX – Introduction 6
  7. 7. LISTSLists In CoFX Form with predefined filters Grouping Column order
  8. 8. LISTSBasic 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. 9. LISTSList 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. 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. 11. LISTSImportant 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. 12. LISTSList 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. 13. FormsForms In CoFX 13
  14. 14. FORMS HeaderLists In CoFXTabs Section Multi column Calculated property (read only)
  15. 15. FORMSBasic 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. 16. FORMSCell 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. 17. FORMSImportant Cell Properties• Same as for lists (see chapter about lists)• Additionally – DefaultValue • TCQL expression – ColSpan 17
  18. 18. FORMSDate 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. 19. FORMSDuration• 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. 20. FORMSDuration 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. 21. FORMSNumbers• NumericCell• NumberFormatPattern – Accepts string or TCQL expression 21
  22. 22. FORMSText• TextCell• Height – Defines the height of the input control• MaxLength – Maximum length in characters 22
  23. 23. FORMSRelations• 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. 24. Lists & Forms Advanced Topics 24
  25. 25. LISTSHyperlinks• 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. 26. LISTSHyperlinks<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. 27. LISTSHyperlinks<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. 28. LISTSFilters• 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. 29. LISTSList With Filters<List Query="From Current In APP_Timesheet.Include(*) Where (Current.APP_BeginTime &gt;= @BeginTime Or @BeginTime = Null) And (:AddDays(Current.APP_EndTime, -1) &lt;= @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. 30. LISTSList 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. 31. LISTSPython 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 Systemclr.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. 32. FORMSRelations – 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… projectCurrent.Project.ProjectUuid={ + Current.Project.ProjectUuid + })" Content="=Current.APP_Task" /> </SectionColumn> </Section>… Defines content of combo box Project Task 32
  33. 33. FORMSFileCell# Avatar File NamefileNameProperty = 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 TypemimeTypeProperty = TextProperty({ "Name": "USR_AvatarMimeType", "InvariantFriendlyName":"Avatar Mime Type", "MaxStorageSize" : 256, "IsNullable" : True, "IsDefaultDisplayProperty" : False, "DefaultValueExpression" : """", "Ownership" : Ownership.User })contactEntity.Properties.Add(mimeTypeProperty)# Avatar File SizefileSizeProperty = 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. 34. FORMSFileCell (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. 35. FileCell (Continued) List Form 35
  36. 36. Saves the day.Thank you!Questions? You want more?office@timecockpit.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×