App Suite UI (latest)
All versions
Imprint
All versions
Imprint
  • Feature Catalog
    • General
      • Getting around
      • Search and notifications
      • Settings and appearance
      • Signing in
      • Account and security
      • Onboarding and devices
      • Working with content
      • Sharing and delegation
      • Storage, plans and feedback
      • Progressive Web App
      • Feedback
      • Upsell
      • Triggers
    • Mail
      • Reading and organizing
      • Attachments
      • Writing and sending
      • Security and trust
      • Accounts and automation
      • Signatures and templates
      • Working with the other apps
      • BIMI
    • Calendar
      • Seeing your day
      • Appointments
      • People and invitations
      • Calendars and subscriptions
      • Rooms and resources
      • Video meetings
      • Search, print and transfer
    • Address Book
      • Contacts
      • Address books
      • Finding people
      • Lists and the other apps
    • Tasks
      • Tasks
      • Task lists and delegation
      • Working with the other apps
    • Drive
      • Working with files
      • Finding and arranging
      • Sharing
      • Storages and capacity
      • Working with the other apps
      • OpenCloud Drive Integration
    • Portal
    • Enterprise and Provider Edition
    • Compliance

      • Accessibility
      • Accessibility Conformance Report
      • Data protection
  • Upgrade Guide
    • Everything new since 7.10.6
    • From 7.10.6 to 8.35
    • From 8.35 to 8.47
    • From 8.47 to 8.55
    • Breaking changes and requirements
  • Deployment Guide

    • Configuration
    • Settings list
    • Login page
    • What's New dialog
    • Mail assets
    • Mail rendering and security
    • All messages folder
    • Unseen messages folder
    • Theming
    • Authentication
    • Browser support
  • Customize & Extend
    • Manifests
    • Toolbars and menus
    • Portal widget
    • Sign In
    • Internationalization
  • Architecture
    • Core UI service

Portal widget

import ext from '@/io.ox/core/extensions'
import $ from '@/jquery'

import gt from 'gettext'

// most common trap is that you plugin is not loaded at all.
// there are different ways to enabled a plugin. simple hack is to
// register it manually in pe/portal/main.js by adding it to the
// DEV_PLUGINS array.

console.info('Loaded portal plugin: pe/portal/plugins/helloworld/register')

// this line allows putting this file to other folders than "apps/plugins/portal"
ext.point('io.ox/portal/widget').extend({ id: 'helloworld' })

ext.point('io.ox/portal/widget/helloworld').extend({

  // widget title (fills <h2> title node)
  title: 'Hello World',
  plugin: 'pe/portal/plugins/helloworld/register',

  // if 'action' is implemented the widget title becomes clickable
  action (baton) {
    /* eslint no-alert: 0 */
    alert(baton.hello)
  },

  // called first. Optional. You can create instances here and put them into the baton
  initialize (baton) {
    baton.hello = String('Hello World')
  },

  // called right after initialize. Should return a deferred object when done
  load () {
    return $.when()
  },

  // called to draw the preview stuff on the portal. waits for load().
  // usually a widget creates a "content" div
  preview (baton) {
    const content = $('<div class="content pointer">').text(baton.hello)
    // you could do something great here
    this.append(content)
  },

  // 'draw' is called to put content into the popup
  // the popup uses the following delegate: '.item, .content.pointer'
  // so you have to you proper CSS classes in preview
  draw (baton) {
    this.append(
      $('<h1>').text(baton.hello)
    )
  }
})

ext.point('io.ox/portal/widget/helloworld/settings').extend({
  title: gt('Hello World'),
  type: 'helloworld',
  editable: false
})
Last Updated: 10/6/26, 12:55 PM
Prev
Toolbars and menus
Next
Sign In