求SugarCRM Sidecar框架及客户端的讲解式教程指引

Hey there, I get how frustrating it can be when you're trying to dig into SugarCRM's Sidecar framework and can't find thorough, step-by-step resources—been there with niche enterprise CRM tools before. Let me break down some structured, hands-on guidance that helped me wrap my head around it, no external links needed.

Sidecar is built on top of Backbone.js and Marionette.js, so don't skip brushing up on these first. Sidecar essentially wraps and extends their core concepts, so understanding:

• Backbone's Models, Collections, and Views (data binding, event handling)
• Marionette's Layouts, Regions, and CompositeViews (managing complex UI structures)
  will make Sidecar's components click way faster. You don't need to be an expert, but having a basic grasp of how these libraries work will eliminate half the confusion when reading Sidecar's code.

Once you have the basics down, focus on Sidecar's key built-in components. Use your browser's developer console in SugarCRM to experiment directly—this is way more effective than just reading docs:

• Models & Collections: Sidecar's Base.Model and Base.Collection handle all interactions with Sugar's REST API automatically. Try this in the console:

  // Create an Accounts bean
  var accountBean = app.data.createBean('Accounts');
  // Fetch a specific account by ID
  accountBean.fetch({id: 'your-account-id-here', success: function() { console.log(accountBean.toJSON()) }});
  

  Notice how it handles API calls, field formatting, and validation out of the box. Check the source in clients/base/models/bean.js to see how it extends Backbone.Model.

• Views, Layouts & Fields: These are the building blocks of Sugar's UI.

  • For views: Open an Account record, then run app.controller.context.get('modelView') in the console to inspect the main detail view. Look at its events object and _render() method to see how it binds user actions and renders data.
  • For fields: Each field type (text, relate, dropdown) has a dedicated Sidecar component. Check clients/base/fields/text/text.js to see how the base text field works, then try overriding it for a custom module (more on that below).
  • Layouts manage regions where views are rendered—look at clients/base/layouts/record/record.js to see how the record detail page's layout is structured.

• Context & Controllers: Context is Sidecar's state management hub—it stores data, view states, and module-specific settings. Run app.controller.context.toJSON() in the console to see all the state data for the current module. Controllers (like clients/base/core/controller.js) coordinate Context, Views, and Models to keep everything in sync.

Nothing beats building small customizations to learn:

1. Custom Field Validation: Add a custom validation rule to the Accounts module's phone_office field.

   • Create a JS file at custom/modules/Accounts/clients/base/fields/phone_office/phone_office.js
   • Override the _validate() method:

     ({
         _validate: function(value) {
             if (value && !value.startsWith('+1')) {
                 app.alert.show('invalid-phone', {
                     level: 'error',
                     messages: 'Phone number must start with +1',
                     autoClose: false
                 });
                 return false;
             }
             return true;
         }
     })
     

   • Run a Quick Repair & Rebuild (Admin > Repair) and test entering a phone number that doesn't start with +1.

2. Add a Custom Panel to Record Detail: Create a new panel on the Account detail page to display custom info.

   • Create a view file at custom/modules/Accounts/clients/base/views/custom-panel/custom-panel.js:

     ({
         template: 'custom/modules/Accounts/clients/base/views/custom-panel/custom-panel',
         initialize: function() {
             this._super('initialize', arguments);
             // Pull data from the context's model
             this.model.on('change', this.render, this);
         }
     })
     

   • Create a template file at custom/modules/Accounts/clients/base/views/custom-panel/tpl/custom-panel.hbs:

     <div class="panel">
         <h3>Custom Info</h3>
         <p>Account Name: {{model.get('name')}}</p>
         <p>Created Date: {{model.get('date_entered')}}</p>
     </div>
     

   • Update the record layout at custom/modules/Accounts/clients/base/layouts/record/record.js to add your panel to the regions:

     ({
         extendsFrom: 'RecordLayout',
         initialize: function() {
             this._super('initialize', arguments);
             this.regions.customPanel = '#custom-panel';
         },
         // Add the region to the layout template
         _placeComponent: function(component) {
             if (component.name === 'custom-panel') {
                 this.$el.append('<div id="custom-panel"></div>');
             }
             this._super('_placeComponent', arguments);
         }
     })
     

   • Run Quick Repair & Rebuild, then open an Account record—you'll see your custom panel.

Since external tutorials are scarce, Sugar's own code and built-in tools are your best friends:

• Source Code Deep Dive: All Sidecar core files live in clients/base/. Start with app.js (the entry point) and explore folders like core, views, models—most files have detailed comments explaining their purpose.
• Developer Mode: Enable it via Admin > System Settings > Developer Mode. This adds a dev tool button in the bottom-right corner that lets you inspect component trees, context state, and API requests in real-time.
• Official Module Examples: Look at how Sugar's default modules (like Contacts, Accounts) are structured in modules/[ModuleName]/clients/base/. Copy their patterns for your own customizations—this is the closest thing to an "official guide" you'll get.

• Cache Issues: Always run a Quick Repair & Rebuild after adding custom code—Sugar caches JS and template files aggressively, so changes won't show up otherwise.
• Console Debugging: Use console.log() to print Context, Model, or View states when something breaks. For example, add console.log(this.model.toJSON()) to a view's initialize() method to check if data is loading correctly.
• Error Messages: Sidecar's console errors are usually specific—if you see "Error rendering field: [field-name]", go straight to that field's JS file to debug the issue.

内容的提问来源于stack exchange，提问作者Deepesh