# Create new calculated field

<!-- -->

1. Let's add a Cost field which will be a calculated field - which will multiply "effort hours" by $100
2. For this in **fields/index.ts** please add this new field:

fields/index.ts

```
{
		calcType: 'calcfield',
		caption: 'Cost',
		dependsOn: ['c_is_billable', 'total_real'],
		jsCode: `() => (entity.c_is_billable ? entity.total_real * 100 : 0)`,
		name: 'c_cost',
		options: { formatting_pre: '$' },
		type: 'number',
},
```

3. And add this field to the layout in **views/layouts/dashboard.tsx** - just after "is billable" field:

views/layouts/dashboard.tsx

```
<field name="c_is_billable" />
<field name="c_cost" />
```

4. Let's install the app again

```
npx comind i app-basic-timelog WORKSPACE_ALIAS_HERE
```

5. Finally, see the form on web with this field:

\[image: Timelog form showing the Cost field displaying $0 when Is billable is unchecked]

6. If you mark "is billable" checkbox - it will auto-calculate Cost field:

\[image: Timelog form showing the Cost field auto-calculated to a dollar amount when Is billable is checked]

For a full reference on calc types (`calcfield`, `rollup`, `shadow`, and others) and the `dependsOn` option, see [Fields and field options - Calculated fields](/developer-guide/building-blocks/fields-and-field-options.md#calculated-fields).