SugarClub
SugarClub
  • User
  • Site
  • Search
  • User
SugarClub
SugarClub
  • User
  • Site
  • Search
  • User
DevClub
DevClub
Dev Tutorials New Component Structure
  • Dev Blog
  • Answers & Best Practices
  • Developer On-boarding
  • Dev Tutorials
  • Developer Events
  • Event Recaps
  • Members
  • Developer Suggestions
  • Sub-Groups
  • More
  • Cancel
  • New
Click here to join "DevClub" to engage in the conversation with this group and curate your SugarClub experience.
  • +On-Boarding Framework
  • +Customization Guides
  • -UI Redesign Technical Guide
    • -New Component Structure
      • Top Header (header-nav)
      • Sidebar Nav (sidebar-nav)
    • +Component Mapping
    • +Codebase Refactor by Example
    • Expected Behavior
    • How to identify customizations to Refactor
    • Troubleshooting
  • Did you know? Copying related records is a breeze!
  • How to write code for SugarCloud webinar Q&A
  • HOW TO: enforce ACL on Tags
  • Programatically manage Dropdown List
  • Remove custom fields created via package installation
  • Sugar Developer Tools
  • Tutorial:  How to register custom platforms in Sugar instances via Platform extension
  • Adding a google reCAPTCHA in a Web-to-Lead form
  • Sugar Developer Blog Style Guide

New Component Structure

It is important to understand each new component’s structure before you start refactoring your code. This redesign uses Sugar’s standard layout component plugin metadata as you are used to, however, in a new location.

The two main layouts introduced in Sugar’s redesign are:

  • header-nav – Base layout hosting components on the top of the screen
  • sidebar-nav – Base layout hosting components on the left side of the screen

Sugar’s base platform loads those newly created layouts amongst other unchanged components required to compose our redesigned UI.

In the following image those components are outlined for better understanding on where they are the role they play in the overall design of the page.

Important: As you go through the new redesign and compare with your code, use this opportunity to use Extension Framework to move your changes from “Prior to 12.3” to this release as this is the only recommended approach and best practice we advocate. 

As a reminder, customizing “base” core files is wrong and will complicate future upgrades.


You understand the new structure, let's get to header:

Move on to Top Header (header-nav).

  • Share
  • History
  • More
  • Cancel
Anonymous
Related
Recommended