Hi @fab Welcome to Builder.io Forum!
Builder.io can indeed be a good fit for developing CRUD-heavy applications with Angular components, particularly when leveraging Components-Only Mode. This mode is designed to enable development teams to integrate their custom components while allowing non-developers to create and manage content within a low-code environment. Here are detailed insights on how well Builder.io can meet your needs and some best practices for achieving this:
Key Features Supporting Your Requirements
- Components-Only Mode
- Custom Components Registration
- Custom JavaScript Logic
- Flexible Data Binding
- User Roles and Permissions
1. Components-Only Mode
Components-Only Mode allows you to restrict Builder.io to use only your custom Angular components, making it an ideal environment for non-developers (citizen developers) to build pages using pre-defined, integrated components that are well-suited to your backend.
Steps to Enable Components-Only Mode:
- Enable Components-Only Mode in Builder.io:
- Go to your Builder settings.
- Set the environment to use Components-Only Mode, ensuring only your custom components are available for use.
Documentation: Components-Only Mode
2. Custom Components Registration
Custom Angular components can be registered with Builder.io, allowing you to use them within the visual editor. Here’s how you can register your custom components and initialize them:
Register an Angular Component Example:
// angular-project/src/app/builder.service.ts
import { Builder } from '@builder.io/sdk';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class BuilderService {
constructor() {
// Initialize Builder with your Public API Key
Builder.init('YOUR_API_KEY');
// Register your custom component
Builder.registerComponent({
name: 'CustomTableComponent',
inputs: [
{
name: 'data',
type: 'list',
subFields: [
{ name: 'name', type: 'string' },
{ name: 'age', type: 'number' },
],
},
{ name: 'title', type: 'string' },
],
});
}
}
Usage in Angular Component:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-custom-table',
template: `
<div>
<h1>{{ title }}</h1>
<table>
<tr *ngFor="let item of data">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
`,
})
export class CustomTableComponent {
@Input() data: any[];
@Input() title: string;
}
Node: Replace CustomTableComponent with your desired component and configure it according to your project’s needs.
3. Custom JavaScript Logic
Builder.io supports custom JavaScript code, which can be embedded within the visual editor. This is particularly useful for adding conditional logic, event handling, and integrating custom workflows:
Example of Adding Custom JavaScript:
// Example script running on a specific user action or event
export function customLogic(input) {
if (input.condition) {
performAction();
}
}
4. Flexible Data Binding
Data binding in Builder.io allows you to bind data dynamically to your components. You can create sophisticated setups where non-developers can configure the data source and properties of each component via easy-to-use forms:
Example of Data Binding in Custom Component:
@Component({
selector: 'app-data-table',
template: `
<div *ngIf="data">
<table>
<thead>
<tr>
<th *ngFor="let heading of headings">{{ heading }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of data">
<td *ngFor="let cell of row">{{ cell }}</td>
</tr>
</tbody>
</table>
</div>
`,
})
export class DataTableComponent {
@Input() data: any[];
@Input() headings: string[];
}
In the Builder UI, non-developers can configure the data input to use different datasets for the table.
5. User Roles and Permissions
Builder.io allows you to set user roles and permissions, ensuring that only authorized users can make changes to critical parts of your application. This is vital for maintaining the integrity of your low-code app while empowering non-developers to build and manage content.
Steps to Manage Roles and Permissions:
- Navigate to Builder.io Settings: Go to your account settings.
- Manage Users and Roles: Assign appropriate roles to users to control their permissions.
Documentation: Roles and Permissions
Conclusion
Builder.io can indeed be a good choice for creating and maintaining a low-code application with an emphasis on CRUD operations using your custom Angular components. By utilizing Components-Only Mode, custom component registration, flexible data binding, and custom JavaScript logic, you can create an environment where non-developers can effectively build and manage sophisticated web applications.
Summary:
- Components-Only Mode: Restrict Builder.io to only use custom Angular components.
- Custom Components Registration: Register custom components with Builder.io to be used within the visual editor.
- Custom JavaScript Logic: Embed custom JavaScript for advanced logic and workflows.
- Flexible Data Binding: Enable non-developers to bind data dynamically to components.
- User Roles and Permissions: Manage user access and permissions for secure content management.
For more details, refer to our extensive documentation and explore the Builder.io SDK to find additional customization options tailored to your needs.