The menu - WilStead/VueCoreFramework GitHub Wiki
The Static Menu
There is an object called uiState
in ClientApp/store/uiStore.ts
with an array property called menuItems
which describes the static menu items that will appear on the site's navigation menu. See the MenuItem
interface in the same file for documentation of the format the array's items must fit.
One of the menu items must have a true dataHook
property, which tells VueCoreFramework which menu item is the root where all dynamically added data items will be appended.
Dynamic Menu Items
In order to get your data to appear on the front end site, at least one of your Entity Framework entity classes must be decorated with the MenuClassAttribute
class attribute (see Data.Attributes.CustomAttributes
for documentation). Classes with this attribute will be automatically added to the site's main navigation menu.
The Category
property allows you to customize the exact structure of the menu, and to locate your class exactly where you wish within it. It accepts a string with the format "supertype/type/subtype
", with as many levels in the hierarchy as you like. The class you are decorating is always the last segment in the chain, and the string used for the segment will replace the class name as the menu item's text. If any segment prior to the last doesn't already exist in the menu, it will be added; and if any other data classes re-use those segments, they will be combined.
Note that the category hierarchy you create in your menu doesn't necessarily need to have anything to do with the actual relationships that exist in the database. This allows you to create a clear, user-friendly navigation scheme regardless of how complex your data schema may be.
Entities without Menu Items
Any entity classes which you do not decorate with the MenuClassAttribute
will not appear on the navigation menu, and therefore will only be accessible on the client front end through navigation properties on the items which you do add to the menu. This allows you to define certain classes as "top-level" classes which can be accessed directly, while others are "child" types which are only found by clicking through properties on the top-level items.
This can be especially helpful for classes which are in a many-to-one relationship, or are the dependent entity in a one-to-one relationship, since it is more likely that users should interact with them only in the context of their "parent" object, and not as a collection unto themselves. This is not required, however, provided you design your relationships and cascade scenarios well.
All Entity Types
You can decorate non-MenuClass entity classes with the DataClassAttribute
, from which MenuClassAttribute
inherits. This base Attribute
class allows you to set certain properties which define the look of your data on the client front end, whether the type gets an entry in the menu or not.
IconClass
- This property allows you to assign an icon which will appear in the menu (if applicable) and on the dashboard for the data type. The property accepts a string, which must be the name of a Material Icon (replace spaces with underscores), or a FontAwesome icon. If you use a FontAwesome icon, you must also set theFontAwesome
property to true.DashboardTableContent
- This property allows you to specify the path to a Vue component which will be shown on the class' front end dashboard above data tables. The path is considered relative to theClientApp/components/data
folder.DashboardFormContent
- Similar toDashboardTableContent
, this property allows you to specify the path to a Vue component which will be shown above data forms (for viewing and editing individual items). This component will receive the type of operation being performed (seeServices.CustomClaimTypes
) and the primary key of the item as props called "operation
" and "id
, respectively.