Skip to main content

​
Overview

The Procedures module provides a centralized knowledge base for documenting and accessing organizational procedures. It uses a rich text editor with advanced formatting capabilities and supports embedded links and references.

​
Viewing Procedures

1

Browse Procedure List

When you open the Procedures page, you’ll see a list of all available procedures in the left sidebar.Each procedure displays:
  • Procedure title/name
  • Preview or description (if applicable)
2

Select a Procedure

Click on any procedure title to view its full content in the main panel.
3

View Content

The procedure displays with:
  • Title at the top
  • Rich formatted content with text styling, images, lists, etc.
  • Related links section at the bottom

​
Searching Procedures

1

Enter Search Term

Type in the search box at the top of the procedures list.
2

View Results

The list filters in real-time to show matching procedures.Search features:
  • Case-insensitive
  • Accent-insensitive (“café” matches “cafe”)
  • Searches procedure titles
function normalizarTexto(texto) {
    return texto.normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "")
        .toLowerCase();
}

​
Advanced Content Search

1

Search in Content

The search automatically includes procedure content (descriptions).
2

View Match Indicators

Results show where matches were found:
  • “Encontrado en: título” - Match in procedure name
  • “Encontrado en: contenido” - Match in procedure text
  • Preview snippet with highlighted search term
3

Click Result

Click any result to open that procedure and automatically return to the full list view.
Search looks through all text content, including formatted text, lists, and tables. This makes it easy to find procedures even if you only remember a keyword from the content.

​
Editing Procedures

Editing is restricted to authorized users. Check with your administrator if you need editing permissions.

​
Enabling Edit Mode

1

Select a Procedure

Click on the procedure you want to edit.
2

Click Edit Button

If you have permissions, click the “Editar” (Edit) button.The editor toolbar appears, showing formatting options.
3

Edit Content

Use the rich text editor to modify the procedure content.

​
Rich Text Editor Features

The editor supports comprehensive formatting options:

​
Text Formatting

Basic Styles

  • Bold
  • Italic
  • Strikethrough

Text Size

  • 12px
  • 14px
  • 16px
  • 18px
  • 20px

​
Headers

Use the header dropdown to create document structure: 
# Header 1 (Largest)
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6 (Smallest)

​
Lists

  1. First item
  2. Second item
  3. Third item

​
Color and Highlighting

  • Text Color: Change text color from the color picker
  • Background Color: Highlight text with background colors
  • Alignment: Left, center, right, or justify text

​
Advanced Features

Code Blocks

Insert formatted code snippets or technical content.

Blockquotes

Add quoted text or call-out boxes.

Subscript/Superscript

Add H₂O or E=mc² notation.

Indentation

Increase or decrease paragraph indentation.

​
Adding Tables

1

Click Insert Table

Click the “insertTable” button in the toolbar.
2

Specify Dimensions

Enter the number of rows and columns when prompted:
  • Default: 3 rows × 3 columns
  • Maximum: No limit
3

Edit Table

Right-click on the table to access table operations:
  • Insert row above/below
  • Insert column left/right
  • Delete row/column
  • Merge cells
  • Delete table
Table support requires the quill-better-table library. If tables aren’t working, verify the library is loaded.

​
Adding Images

1

Click Image Button

Click the image icon in the toolbar.
2

Enter Image URL

Provide the URL of the image you want to embed.Supported formats:
  • JPEG, PNG, GIF, SVG
  • Must be a publicly accessible URL
3

Insert

The image appears inline in your procedure content.
Images are embedded by URL reference, not uploaded. Ensure the image URL remains accessible, or the image will not display.

​
Inline Links in Content

1

Click Link Button

Click the link icon in the toolbar.
2

Choose Link Type

When prompted, type:
  • “item” - Link to another procedure
  • “enlace” - Link to external URL
3

For Procedure Links

  • Enter the text to display
  • The system creates an internal link (href=”#”)
  • Clicking the link navigates to that procedure
4

For External Links

  • Enter the URL
  • Enter the link text
  • The link opens in a new tab when clicked
1

Enable Edit Mode

Click “Editar” to enter edit mode.
2

Click Add Link

Click “Agregar Enlace” button below the content area.
3

Enter Link Details

Provide:
  1. Link description/title
  2. URL
4

Save

Click “Guardar” to save the procedure with the new link.Links appear as clickable cards in the Related Links section.
1

Enter Edit Mode

Click “Editar” on the procedure.
2

Click X Button

In edit mode, each link shows an “X” button.
3

Confirm Deletion

Click “X” and confirm to remove the link.

​
Saving Changes

1

Review Your Edits

Check all formatting, content, and links before saving.
2

Click Save Button

Click “Guardar” to commit changes to Firebase.
3

Automatic Update

The procedure:
  • Saves to Firebase (procedimientos node)
  • Exits edit mode
  • Refreshes the display
  • Becomes immediately available to all users
Changes save to Firebase in real-time. Other users see updates immediately without refreshing.

​
Creating New Procedures

1

Click Add Button

Click “Agregar Item” (Add Item) if you have permissions.
2

Enter Procedure Name

Type a unique name for the new procedure.The system checks if the name already exists:
checkItemExists(itemNombreTrimmed).then(exists => {
    if (exists) {
        alert("Ya existe un ítem con ese nombre...");
    }
});
3

Create Empty Procedure

The system creates a new procedure with:
  • Empty description field
  • Empty links object
  • Your username as creator
4

Edit and Populate

Click on the new procedure and use the edit mode to add content.

​
Deleting Procedures

Deletion is permanent and cannot be undone. Ensure you have backups if needed.
1

Click Delete Button

Click “Eliminar Item” (Delete Item) if you have permissions.
2

Enter Procedure Name

Type the exact name of the procedure to delete.
3

Confirm Deletion

Confirm the deletion when prompted.The procedure is removed from:
  • Firebase database
  • The procedures list
  • All user views immediately
Procedures can reference each other:
1

Click Linked Procedure

When viewing a procedure, click any internal link (marked with href=”#”).
2

Automatic Navigation

The system:
  • Loads the referenced procedure
  • Clears the search box
  • Returns to full list view
  • Highlights the selected procedure

​
Using Search and Select

1

Search for Procedure

Use the search box to find related procedures.
2

Click to View

Click the procedure in search results.
3

Return to Full List

The search clears automatically, showing all procedures again.

​
Best Practices

Clear Titles

Use descriptive, searchable titles for procedures.

Structured Content

Use headers, lists, and tables to organize information clearly.

Cross-Reference

Link related procedures together for easy navigation.

Regular Updates

Review and update procedures regularly to ensure accuracy.

External Resources

Add links to external documentation, tools, or resources.

Visual Aids

Include screenshots or diagrams to illustrate complex steps.

​
Advanced Features

​
Real-Time Collaboration

The system uses Firebase listeners for real-time updates: 
itemsRef.on('value', (snapshot) => {
    todosLosDatos = snapshot.val() || {};
    mostrarResultados(todosLosDatos, busquedaActual);
});
Features:
  • Multiple users can view simultaneously
  • Changes appear immediately for all users
  • No manual refresh required
  • Automatic conflict resolution

​
Table Operations

When working with tables:
  • Insert column left
  • Insert column right
  • Delete column

​
Content Formatting Tips

Use numbered lists with indentation:
  1. Main step
    • Sub-step detail
    • Additional detail
  2. Next main step
    • Sub-step
Combine multiple formatting:
  • Bold text for key terms
  • Background color for warnings
  • Blockquotes for notes
  • Different text colors for emphasis
Structure with headers:
  • H1 for main title
  • H2 for major sections
  • H3 for subsections
  • Regular text for details

​
Permissions and Access Control

Edit access is controlled by user authorization: 
const usuario = ["Andrés_Felipe_Yepes_Tascón", "Ocaris_David_Arango_Aguilar"];

if (usuario.includes(asesorActual)) {
    // Show edit, add, and delete buttons
} else {
    // Read-only mode
}
All users can view and search procedures. Only authorized users can edit, create, or delete.

​
Troubleshooting

Solution: Check that:
  • You clicked the “Editar” button
  • You have edit permissions
  • JavaScript is enabled
  • Quill editor library loaded correctly
Try refreshing the page.
Solution: Verify:
  • You clicked “Guardar” button
  • Internet connection is active
  • Firebase is accessible
  • No browser console errors
Check the browser console for specific error messages.
Solution: Remember that search:
  • Is case-insensitive
  • Ignores accents
  • Matches partial words
Try simpler search terms or browse the full list.
Solution: Table functionality requires quill-better-table:
  • Check that the library is loaded
  • Look for console errors
  • Try a different browser
Contact administrator if tables remain unavailable.
Solution: Verify that:
  • Image URL is publicly accessible
  • URL is correct and complete
  • Image format is supported (JPEG, PNG, GIF, SVG)
  • No mixed content warnings (HTTPS vs HTTP)

Managing Schedules

Learn about scheduling procedures

Creating Templates

Create message templates

Using Calculator

Calculate grades and scores

Build docs developers (and LLMs) love

Get started for freeTalk to us