admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Migrated Developer Docs (#5683)

Browse Source 
- Migrated developer docs to Twenty website

- Modified User Guide and Docs layout to include sections and
subsections

**Section Example:**
<img width="549" alt="Screenshot 2024-05-30 at 15 44 42"
src="https://github.com/twentyhq/twenty/assets/102751374/41bd4037-4b76-48e6-bc79-48d3d6be9ab8">

**Subsection Example:**
<img width="557" alt="Screenshot 2024-05-30 at 15 44 55"
src="https://github.com/twentyhq/twenty/assets/102751374/f14c65a9-ab0c-4530-b624-5b20fc00511a">


- Created different components (Tabs, Tables, Editors etc.) for the mdx
files

**Tabs & Editor**

<img width="665" alt="Screenshot 2024-05-30 at 15 47 39"
src="https://github.com/twentyhq/twenty/assets/102751374/5166b5c7-b6cf-417d-9f29-b1f674c1c531">

**Tables**

<img width="698" alt="Screenshot 2024-05-30 at 15 57 39"
src="https://github.com/twentyhq/twenty/assets/102751374/2bbfe937-ec19-4004-ab00-f7a56e96db4a">

<img width="661" alt="Screenshot 2024-05-30 at 16 03 32"
src="https://github.com/twentyhq/twenty/assets/102751374/ae95b47c-dd92-44f9-b535-ccdc953f71ff">

- Created a crawler for Twenty Developers (now that it will be on the
twenty website). Once this PR is merged and the website is re-deployed,
we need to start crawling and make sure the index name is
‘twenty-developer’
- Added a dropdown menu in the header to access User Guide and
Developers + added Developers to footer


https://github.com/twentyhq/twenty/assets/102751374/1bd1fbbd-1e65-4461-b18b-84d4ddbb8ea1

- Made new layout responsive

Please fill in the information for each mdx file so that it can appear
on its card, as well as in the ‘In this article’ section. Example with
‘Getting Started’ in the User Guide:

<img width="786" alt="Screenshot 2024-05-30 at 16 29 39"
src="https://github.com/twentyhq/twenty/assets/102751374/2714b01d-a664-4ddc-9291-528632ee12ea">

Example with info and sectionInfo filled in for 'Getting Started':

<img width="620" alt="Screenshot 2024-05-30 at 16 33 57"
src="https://github.com/twentyhq/twenty/assets/102751374/bc69e880-da6a-4b7e-bace-1effea866c11">


Please keep in mind that the images that are being used for Developers
are the same as those found in User Guide and may not match the article.

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Ady Beraud
2024-06-03 19:52:43 +03:00
committed by GitHub
parent f7cdd14c75
commit 671de4170f
139 changed files with 7057 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
packages/twenty-website/src/content/user-guide/objects/fields.mdx Normal file
View File

@ -0,0 +1,89 @@
---
title: Fields
info: Understand the role of fields and how to handle them.
icon: IconChecklist
image: /images/user-guide/fields/field.png
sectionInfo: Discover how to use standard and custom objects in your workspace.
---
## About Fields
Fields in an object are akin to the column names in an Excel spreadsheet, indicating the type of data stored — such as text, numbers, or dates — under specific names. These fields can be standard (created by default) or custom (user-created).
### Standard Fields
The platform includes Standard Fields by default as predefined fields designed to meet common, universal requirements in business modeling.
As an example, "First Name" and "Last Name" are standard fields within the `people object`. They're text fields, meant to capture and store the respective names of individuals.
As essential parts of the data model, you can't delete them, but only deactivate them.
<img src="/images/user-guide/fields/standard-fields.png" style={{width:'100%'}}/>
### Custom Fields
A `Custom Field` is a user-defined attribute you can add to a standard or custom object to store specific information that's not captured by the default fields. These fields can carry different types of data such as text, number, date, Select values, etc. Custom fields allow you to tailor your database to the unique needs of your business.
For instance, a custom field for SpaceX could be "Rocket Active Status", indicating if a rocket is operational.
<img src="/images/user-guide/fields/custom-fields.png"style={{width:'100%'}}/>
## Create a Custom Field
To add a custom field to any object, follow these steps:
1. Go to `Settings` in the left sidebar.
2. Go to `Data Model`, then select the object you wish to customize
3. Proceed by clicking on `Add Field`.
4. Choose a field name and type that suits your requirements. Consider adding a field description for better understanding.
Your newly created field is now available within the application's fields. To display it on a specific view, click on the options menu, then select "Fields".
<div style={{padding:'71.15% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/927628219?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
For creating `Custom Fields` in a more expeditious manner, make use of the **+** button located in the top right of the chosen object table, and then select the Customize fields option. This pathway affords you rapid access to the Data Model Settings page.
<img src="/images/user-guide/fields/quick-new-field.png" style={{width:'100%'}}/>
## Deactivate a field
You can deactivate a field in the app to stop it from functioning without disrupting your data model. Deactivation is like a soft deletion, making the field unavailable for use in the app.
Here's how you can do it:
1. Locate the field you wish to deactivate. You'll find these under various object sections.
2. To the right of the line, three vertically aligned dots symbolize a menu button. Click on this to unveil a dropdown list of options.
3. In the dropdown menu, find and click on the "deactivate" option.
<img src="/images/user-guide/fields/deactivate-field.png" style={{width:'100%'}}/>
And, voila! You've deactivated a field. But what does this imply for your CRM operations?
1. **In-App Functionality:** A deactivated field will no longer be functional within the app. You won't be able to assign values to these fields anymore.
2. **Relation Fields:** If the deactivated field happens to be a relation field, the system doesn't delete the existing relation. It does prevent you from assigning or linking records to each other via this field in the app, moving forward.
3. **API:** You can still use deactivated Fields and their data through the API.
You can reactivate Standard and Custom Fields or have the option to permanently delete them.
<ArticleEditContent articleTitle="fields.mdx"></ArticleEditContent>

46
packages/twenty-website/src/content/user-guide/objects/import-export-data.mdx Normal file
View File

@ -0,0 +1,46 @@
---
title: Import/Export Data
info: Learn the procedures for importing and exporting data.
icon: IconNote
image: /images/user-guide/import-export-data/cloud.png
sectionInfo: Discover how to use standard and custom objects in your workspace.
---
## Import data
You can import People and Companies data into Twenty from other apps using a .csv, .xslx, or .xsl file. In the <b>Companies</b> or <b>People</b> page, click on <b>Options</b> and then on <b>Import</b>.
Upload your file, match the columns, check your data and import it.
<img src="/images/user-guide/import-export-data/match-columns.png" style={{width:'100%'}}/>
## Export data
To export data from an object:
1. Visit the object index.
2. Choose the view for data export.
3. Access the `Options` menu.
4. Click on `Export`.
5. Select the save location for the CSV data. Note that exporting may take time with a large record count.
<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/926226303?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<ArticleEditContent articleTitle="import-export-data.mdx"></ArticleEditContent>

83
packages/twenty-website/src/content/user-guide/objects/kanban-views.mdx Normal file
View File

@ -0,0 +1,83 @@
---
title: Kanban Views
info: Learn how to customize and navigate Kanban Views.
icon: IconTargetArrow
image: /images/user-guide/kanban-views/kanban.png
sectionInfo: Discover how to use standard and custom objects in your workspace.
---
## About Kanban Views
Kanban views visually map out process flows, where each column stands for a distinct stage and each card represents a record.
## Move Cards between Stages
You can move each card between stages as it goes through your workflow by dragging and dropping. To proceed, hold your click on a card and move it to the next stage.
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/927888627?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
## Add and delete stages
You can tailor your workflow to suit your needs using stages, which represent a value in a Select Field:
### Add Stages
To add a stage, access the Select Field Settings by navigating to Settings > Data Model, selecting your object, and then the field your Kanban board depends on.
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/927890428?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
### Remove Stages
To remove a stage, hover the stage name or the `⋮` icon, click `Edit from settings` in the Select Field settings, and then click <b>Delete</b> next to the relevant stage.
<img src="/images/user-guide/kanban-views/edit-stage.png" style={{width:'100%'}}/>
## Display fields
You can configure your Kanban board to display some fields and hide others. To hide a field, click on <b>Options</b> on the top right, then on <b>Fields</b> to bring up the list of options. Hover the field you want to hide to bring up the `-` button. Click on it to hide the field.
You can also rearrange the order of fields by holding down the field name and dragging it to where you want it.
<img src="/images/user-guide/kanban-views/filter.png" style={{width:'100%'}}/>
## Compact View
You can also hide all the fields, and get an overview of all the opportunities at a glance. To do so, click on <b>Options</b> on the top right and turn on the toggle in front of the <b>Compact view</b> option.
<img src="/images/user-guide/kanban-views/compact-view.png"style={{width:'100%'}}/>
<ArticleEditContent articleTitle="kanban-views.mdx"></ArticleEditContent>

85
packages/twenty-website/src/content/user-guide/objects/standard-objects.mdx Normal file
View File

@ -0,0 +1,85 @@
---
title: Standard and Custom Objects
info: Discover how to use standard and custom objects in your workspace.
icon: IconChecklist
image: /images/user-guide/objects/objects.png
sectionInfo: Discover how to use standard and custom objects in your workspace.
---
## Standard Objects
Standard objects are predefined entities in your workspace that offer integrated, standardized intelligence requiring no extra configuration. They're part of a shared data model accessible to all users of Twenty.
<img src="/images/user-guide/objects/standard-objects.png"style={{width:'100%'}}/>
### People
The `People` object aggregates customer relations data. It includes contact details and interaction history, providing a comprehensive view of your business's customer interactions.
### Company
The `Companies` object consolidates business account information. It encompasses all pertinent data such as industry, size, location, and contact personnel, thereby offering an integrated perspective of your business's organizational connections. It is both link to the People and Opportunities objects.
### Opportunities
The `Opportunities` object encapsulates deal-related data. It tracks the progression of potential sales, from prospecting to closure, recording stages, deal sizes, associated accounts, and expected closure dates. This provides a well-rounded view of your business's sales pipeline.
## Custom objects
Custom objects are objects that you can create to store information that's unique to your organization. They're not built-in; members of your workspace can create and customize custom objects to hold information that standard objects aren't suitable for. For example, if you're SpaceX, you may want to create a custom object for Rockets and Launches.
<img src="/images/user-guide/objects/custom-objects.png"style={{width:'100%'}}/>
### Creating a new custom object
To create a new custom object:
1. Go to Settings in the sidebar on the left.
2. Under Workspace, go to Data model. Here you'll be able to see an overview of all your existing Standard and Custom objects (both active and disabled).
<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/926288174?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
3. Click on `+ New object` at the top, then choose Custom as the object type. Enter the name (both singular and plural), choose an icon, and add a description for your custom object and hit Save (at the top right). Using Listing as an example of custom object, the singular would be "listing" and the plural would be "listings" along with a description like "Listings that hosts created to showcase their property."
<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/926293493?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
4. Once you create your custom object, you'll be able to manage it. You can edit the name, icon and description, view the different fields, and add more fields.
<img src="/images/user-guide/objects/customize-fields.png"style={{width:'100%'}}/>
<ArticleEditContent articleTitle="objects.mdx"></ArticleEditContent>

73
packages/twenty-website/src/content/user-guide/objects/table-views.mdx Normal file
View File

@ -0,0 +1,73 @@
---
title: Table Views
info: Learn how to customize and navigate Table Views.
icon: IconChecklist
image: /images/user-guide/table-views/table.png
sectionInfo: Discover how to use standard and custom objects in your workspace.
---
## About Table Views
Table views are visual representations of data structured in rows and columns.
## Create record
Add records as needed, without limits. To add a record, you can either click on the **+** button at the top right of the screen or at the top of the record **Name** column.
Enter the record name then press `Enter` to save. To edit a record name, click on its name on its detail page.
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/927071691?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
## Delete record
**Index View:** To delete a record, select the checkbox next to the record and click the delete button below.
**Record Page:** Tap the **3 dots menu** in the top right corner, then select delete.
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/927073570?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
## Add a Custom Field
To create a custom field, click the **+** button at the right end of the table columns and select **Customize fields**.
<img src="/images/user-guide/fields/quick-new-field.png" style={{width:'100%'}}/>
You can also do it by navigating to **Settings** > **Data Model** > **People**. Click on **Add Field**. Choose a field name and type. The new field will be available in the app.
<ArticleEditContent articleTitle="table-views.mdx"></ArticleEditContent>

179
packages/twenty-website/src/content/user-guide/objects/views-sort-filter.mdx Normal file
View File

@ -0,0 +1,179 @@
---
title: Views, Sort and Filter
info: Find out how to create, manage and delete Object Views.
icon: IconChecklist
image: /images/user-guide/views/filter.png
sectionInfo: Discover how to use standard and custom objects in your workspace.
---
## About Views
You can see your records in different ways by creating views. In a view, you can apply filters and sorts to organize your content efficiently. For instance, on the `People` object, you can create a view to isolate US contacts by filtering those with a US phone number.
### Default View
Each object comes with an unfiltered, unsorted, and undeletable view known as the Default view. It's named after the object's plural name, such as "All Companies," "All People," "All Opportunities".
<img src="/images/user-guide/views/default-view.png" style={{width:'100%'}}/>
## Creating, Editing and Deleting Views
You can create several custom views and share them with your team.
### Creating a View
There is two ways to create a new view. Either directly from the `View Switcher`, either filtering and sorting an existing view.
#### From View Switcher
1. Open the View Switcher
2. Click the `Add View` button at the bottom of the view switcher menu.
3. Choose an Icon and name for your View.
4. Choose a "View type" between Table and Kanban.
5. (Kanban Views only) For your Kanban view, select the Select field you wish to use as the column header. The system prompts you to create one from the Settings before enabling Kanban view creation, if your object lacks a `Select field`.
6. Click "Create" to generate your new view.
The newly created view opens automatically.
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/927639721?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
#### From Sorting and Filtering
When you change the `Sorting` and `Filtering` of an existing view, a `Save as new view` button will appear at the right edge of the `View Bar`. This will opens the New View menu mentionned above, allowing you to create a new view out of an existing one.
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/927643495?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
### Editing and Deleting a View
To Edit or Delete a view:
1. Open the View Switcher
2. Hover the View you wish to edit
3. Click the `Pen Icon Button` that appears on the right
You will then be able to modify the view. To delete it, press the `Delete` button that just appeard.
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/927645774?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
## Navigating Between Views
To switch between views, simply open the view switcher and click the view you wish to open.
## Customizing Views
Each view can be customized to streamline your business processes. Views help segment your data. You can customize views using filters, sorts, and field display.
### Filtering a View
To filter a view:
- Click **Filter** > select a field (for example: Name, Company in the People Object).
- Choose a condition, select a value, and apply the filter.
- Add more filters with `+ Add filter` or remove them with **X**.
<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/926282262?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
### Sorting a View
Order your fields data in ascending or descending order:
- Select **Sort**, choose a field, and define the sort order you desire.
- You can apply and arrange several sorts as needed.
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/927885588?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
### Field display
You can customize which fields to display within a view. To hide a field, click **Options** > **Fields** and select the `-` button next to the field or click on the field column header and select **hide**.
You can rearrange fields by clicking their field column header and then press **Move Right** or **Move Left**.
### Opening Record
To open a record, click on the name in the first column. This action will open the corresponding Record page.
<ArticleEditContent articleTitle="views-sort-filter.mdx"></ArticleEditContent>