View guide

Create action view

<template>
    <div class="app-view">
        <view-view v-bind:data="view"></view-view>
        <action-bar v-bind:primary="actions"></action-bar>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from "vue-property-decorator";
    import ActionBar from "@enhavo/app/Action/Components/ActionBar.vue";
    import '@enhavo/app/assets/styles/view.scss'
    import ViewData from "@enhavo/app/View/ViewData";
    import ViewComponent from "@enhavo/app/View/Components/ViewComponent";

    @Component({
        components: {ActionBar, 'view-view': ViewComponent}
    })
    export default class AppView extends Vue {
        name = 'app-view';

        @Prop()
        messages: Array<object>;

        @Prop()
        view: ViewData;

        @Prop()
        actions: Array<object>;
    }
</script>

import DataLoader from '@enhavo/app/DataLoader';
import ActionManager from "@enhavo/app/Action/ActionManager";
import ViewApp from "@enhavo/app/ViewApp";
import EventDispatcher from "@enhavo/app/ViewStack/EventDispatcher";
import View from "@enhavo/app/View/View";

export default class StatsApp extends ViewApp
{
    private actionManager: ActionManager;

    constructor(loader: DataLoader, eventDispatcher: EventDispatcher, view: View, actionManager: ActionManager)
    {
        super(loader, eventDispatcher, view);
        this.actionManager = actionManager;
    }
}

import StatsApp from "@enhavo/newsletter/Stats/StatsApp";
import Application from "@enhavo/app/Application";
import AppInterface from "@enhavo/app/AppInterface";
import ActionAwareApplication from "@enhavo/app/Action/ActionAwareApplication";

export class StatsApplication extends Application implements ActionAwareApplication
{
    public getApp(): AppInterface
    {
        if(this.app == null) {
            this.app = new StatsApp(this.getDataLoader(), this.getEventDispatcher(), this.getView(), this.getActionManager());
        }
        return this.app;
    }
}

let application = new StatsApplication();
export default application;

Create view

import View from "@enhavo/app/View/View";
import EventDispatcher from "@enhavo/app/ViewStack/EventDispatcher";
import * as $ from "jquery";

let view = new View();
let eventDispatcher = new EventDispatcher(view);
view.setEventDispatcher(eventDispatcher);
view.addDefaultCloseListener();

$(function() {
    view.ready();
});

Customize styles

Here is a short guide how you can change the styles in enhavo admin.

Add custom style file

You can import a custom style file at the top of your entrypoint. Just add your import statement at the end all other imports. In this example we add style in assets/enhavo/styles/custom.scss

// assets/enhavo/main.ts

import Application from "@enhavo/app/Main/MainApplication";
import ViewRegistryPackage from "./registry/view";
// ... other imports
import "./styles/custom.scss"

// ...

Customize variables

To edit some of the variables in the enhavo admin. Just add a file assets/enhavo/styles/custom-vars.scss and change the var values.

The defaults vars are:

$fontFamily:"IBM Plex Sans";
$fontFamily2:"IBM Plex Sans Condensed";
$fontSize:16px;
$lineHeight:1.4em;
$color1:#00b1db;
$color1b:#0097c7;
$color2:#242733;
$color2b:#1C1F2B;
$color3:#dbc353;
$color4:#fd516b;
$color5:#32de81;
$color6:#dd8888;
$color6b:#cc7777;
$grey1:#f5f5f5;
$grey2:#9da9ad;
$grey3:#77878c;
$grey4:#c2c2c2;
$grey5:#e5e5e5;
$black: #1c353b;
$toolbarHeight:50px;
$collapsedMenuWidth:50px;
$sidebarWidth:230px;
$fontRegular:400;
$fontMedium:500;
$fontSemibold:600;
$fontBold:700;

Overwrite application service

In some cases you want to add your own logic or replace the default one. If this logic is in a service that is loaded by the application, you can just overwrite this service and change it to your needs. Just follow these steps.

Create service

Create your own service and extend from the old one

// assets/enhavo/lib/MyView.ts

import View from '@enhavo/app/View';

export default class MyView extends View
{
    // ... overwrite or add function
}

Create application

Create your application class and extend from the old. Just replace the services you want by overwriting the parent methods.

// assets/enhavo/lib/MyApplication.ts

import Application from "@enhavo/app/Application";
import MyView from "./MyView"

export default class MyApplication extends Application
{
    public getView()
    {
        if(this.view == null) {
            this.view = new MyView(this.getDataLoader().load()['view']);
            this.view.setEventDispatcher(this.getEventDispatcher());
        }
        return this.view;
    }
}

Use application

Replace your the default application with your own one by changing the import statement

// assets/enhavo/view.ts

import Application from "./lib/MyApplication";