36
UI Configuration in CoFX Configuring Lists and Forms in CoFX and time cockpit Publishing Date: Oct. 1 st 2012

UI Configuration in CoFX

  • View
    561

  • Download
    1

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: UI Configuration in CoFX

UI Configuration in CoFXConfiguring Lists and Forms in CoFX and time cockpitPublishing Date: Oct. 1st 2012

Page 2: UI Configuration in CoFX

Introduction

• software architects gmbhBirkenweg 164060 LeondingAustria

• ContactWeb: http://www.timecockpit.comPhone: +43 720 890280Email: [email protected]

INTRO

DU

CTION

Page 3: UI Configuration in CoFX

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.

ABOU

T TIME CO

CKPIT

Page 4: UI Configuration in CoFX

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.

ÜBER TIM

E COCKPIT

Page 5: UI Configuration in CoFX

5

UI Configuration Elements

• Lists– Predefined filters (=form)– Grouping– Columns

• Forms– Tabs– Sections– Fields

INTRO

DU

CTION

Page 6: UI Configuration in CoFX

ListsLists In CoFX – Introduction

6

Page 7: UI Configuration in CoFX

Lists In CoFXLISTS

Form with predefined filters

Grouping

Column order

Page 8: UI Configuration in CoFX

8

Basic List

<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>

LISTS

TCQL

Page 9: UI Configuration in CoFX

9

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

LISTS

Page 10: UI Configuration in CoFX

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>

Page 11: UI Configuration in CoFX

11

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

LISTS

Page 12: UI Configuration in CoFX

12

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>

LISTS

Page 13: UI Configuration in CoFX

FormsForms In CoFX

13

Page 14: UI Configuration in CoFX

Lists In CoFXFO

RMS

Tabs

Section

Multi column

Header

Calculated property (read

only)

Page 15: UI Configuration in CoFX

15

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>

FORM

S

Page 16: UI Configuration in CoFX

16

Cell Types

• By default cell type and cell properties derived from model (BoundCell)• Customizable FO

RMS

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

Page 17: UI Configuration in CoFX

17

Important Cell Properties

• Same as for lists (see chapter about lists)• Additionally– DefaultValue• TCQL expression

– ColSpan

FORM

S

Page 18: UI Configuration in CoFX

18

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)

FORM

S

Page 19: UI Configuration in CoFX

19

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

FORM

S

Page 20: UI Configuration in CoFX

20

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>…

FORM

S

Page 21: UI Configuration in CoFX

21

Numbers

• NumericCell• NumberFormatPattern– Accepts string or TCQL expression

FORM

S

Page 22: UI Configuration in CoFX

22

Text

• TextCell• Height– Defines the height of the input control

• MaxLength– Maximum length in characters

FORM

S

Page 23: UI Configuration in CoFX

23

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)

FORM

S

Page 24: UI Configuration in CoFX

Lists & Forms Advanced Topics

24

Page 25: UI Configuration in CoFX

25

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

LISTS

Page 26: UI Configuration in CoFX

26

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.NavigateContent> <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>

LISTS

Hyperlink to a form

Page 27: UI Configuration in CoFX

27

Hyperlinks

<List …> <BoundCell Content="Projekte"> <BoundCell.Hyperlink> <Hyperlink Target="FilteredProjectList" Title="= 'Projekte'"> <Hyperlink.NavigateContent> <p:NamedListConfiguration ModelEntityName="APP_Project"> <p:NamedListConfiguration.Parameters> <Parameter Name="Customer" Value="=Current.CustomerUuid" /> </p:NamedListConfiguration.Parameters> </p:NamedListConfiguration> </Hyperlink.NavigateContent> </Hyperlink> </BoundCell.Hyperlink> </BoundCell> <BoundCell Content="=Current.APP_Project.APP_Customer" /> <BoundCell Content="=Current.APP_Project.APP_Code" />…</List>

LISTS

Hyperlink to a list

Pass filter parameter to listFilter parameter

name (see filter forms)

Page 28: UI Configuration in CoFX

28

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)

LISTS

Page 29: UI Configuration in CoFX

29

List 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>

LISTS

Page 30: UI Configuration in CoFX

30

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>

LISTS

<List.Filter> <Form> <Tab Header="Filter"><Section> <SectionColumn> <RelationCell DisplayProperty="APP_Fullname" FilterOperator="=" FilterParameterName="UserDetail" FilterPath="APP_UserDetail" List="APP_DefaultUserDetailList" />…</List>

Page 31: UI Configuration in CoFX

31

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 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>

LISTS

Page 32: UI Configuration in CoFX

32

Relations – Dependent Combo Boxes

<Form ModelEntityName="APP_Timesheet" xmlns="…"> <Tab Header="Zeitbuchung"> <Section Header="Project"> <SectionColumn> <BoundCell Content="=Current.APP_Project" /> <RelationCell Condition="=:Iif(Current.Project = Null, '1 = 0',

'Current.Project.ProjectUuid={' + Current.Project.ProjectUuid + '}')" Content="=Current.APP_Task" /> </SectionColumn> </Section>…

FORM

S

Defines content of combo box

If user did not already select a

project…

…show an empty combo box for

tasks…

…otherwise add a condition to only

display tasks of this project

Project Task

Page 33: UI Configuration in CoFX

33

FileCell

# 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)

FORM

S

Page 34: UI Configuration in CoFX

34

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,"AllowedMimeTypes" : allowedMimeTypes,"AllowedExtensions" : allowedExtensions,"ContentProcessing": ContentProcessing.Compress

})contactEntity.Properties.Add(fileProperty)

FORM

S

Compress and/or encrypt

Page 35: UI Configuration in CoFX

35

FileCell (Continued)

List

Form

Page 36: UI Configuration in CoFX

Thank you!Questions? You want [email protected]

Saves the day.