UI Tools

User interface components.

• Web
  • Icons
  • Tabs

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.