Skip to content

UI Tools

Roman Kopaev edited this page Oct 16, 2018 · 8 revisions

User interface components.

Web

Icons

Library for creating icons in the form header.

Installation:

  1. Open form editor.
  2. Open form properties.
  3. Open Evant tab.
  4. Add pz_/components/UI/icons.js library to the list.

Example:

var icons = new PZone.UI.Forms.Icons(
    { 
        shape: 'circle', count: 6, background: "#f472d0 url('data:image/png;base64,iVBORw0KGg...VORK5CYII=')", 
        action: { entityName: 'new_entity', id: '373F93F7-831F-405D-94D3-836DFB9749ED' }
    },
    { shape: 'circle', border: '2px solid #fa6800', content: 'Info' },
    { shape: 'square', border: '2px solid#76608a', background: "url('data:image/png;base64,iVBORw0KGg...VORK5CYII=')" },
    { shape: 'circle', background: "#a4c400", content: 'Info' },
    { shape: 'square', count: 25, background: "#6d8764 url('data:image/png;base64,iVBORw0KGg...VORK5CYII=')" },
    { shape: 'square', background: "#1ba1e2 url('data:image/png;base64,iVBORw0KGg...VORK5CYII=')" },
    { background: "url('data:image/png;base64,iVBORw0KGg...VORK5CYII=')" }
);
icons.show();
icons.add({
    tooltip: 'New Icon',
    action: { entityName: 'new_entity', id: 'FC279F90-ED02-4FB8-88AF-65E8B2031C7F' },
    background: "url('" + Xrm.Page.context.prependOrgName('/WebResources/new_/ui/image.png') + "')"
});

Icon Object:

iconInfo {
    shape : string, // circle | square
    tooltip : string,
    count : int,
    background : string,
    border : string,
    action : {
        entityName : string,
        id : string
    },
    content : string
}

Tabs

Формирование на форме вкладок вместо раскрывающихся разделов.

Подключение:

  1. Открыть редактор формы.
  2. Открыть свойства формы.
  3. Открыть вкладку События.
  4. В список библиотек добавить библиотеку pz_/components/UI/tabs.js
  5. Добавить обработчик события OnLoad для формы. Название функции: PZone.UI.Forms.tabs.
You can’t perform that action at this time.