Pular para o conteúdo principal

User Inteface

With this namespace, you can quickly provide methods to show UI.

The namespace User Interface provides to developers, methods to easily show or validate data.

//accessing to ui methodsSW.UI.{methodName}

editComponentsOptionInBulk#

Description#

This method can be used to edit an option in various components.

Method(s)#

1    function editComponentsOptionInBulk(components: any[], option: string, value: any): void
ParameterTypeRequiredDefaultsDescription
componentsany[]trueComponents array to edit option
optionstringtrueOption to edit
valueanytrueNew option value

Basic Usage#

SW.UI.editComponentsOptionInBulk([dataGrid, chart], 'dataSource', data);

Response#

It will set dataGrid and chart dataSources with the variable data passed.


getEntityImage#

Description#

This method can be used to get entities image.

Method(s)#

1    function getEntityImage(element: HTMLElement, documentName: string,2       params?: {3           size?: Size4       } = {5           size: Size.SMALL6       }7   ): string;
ParameterTypeRequiredDefaultsDescription
elementHTMLElementtrueHTML element
documentNamestringtrueType of document
sizeSizefalse"small"Image's size to be displayed(small, medium, large)

Basic Usage#

SW.UI.getEntityImage(element, 'job', { size: 'large' });

Response#

Returns the passed HTML element with the entity job image.


setAttribute#

Description#

This method can be used to set element's attributes.

Method(s)#

1    function setAttribute(element: HTMLElement, attribute: string, attributeValue: string,2       params: { 3           text?: string; 4           createContainer?: boolean 5       } = { 6           createContainer: true 7       }8   ): HTMLElement
ParameterTypeRequiredDefaultsDescription
elementHTMLElementtrueHTML element
attributestringtrueAttribute to update
attributeValuestringtrueValue to update attribute
textstringfalseInner HTML
createContainerbooleanfalseCreate a new div container

Basic Usage#

SW.UI.setAttribute(element, 'style', 'display: contents');

Response#

It will add the attribute value to the given attribute.


setConditionalColor#

Description#

This method can be used to set element's attributes.

Method(s)#

1   function setConditionalColor(element: HTMLElement, value: string, conditions: boolean[], colors: string[],2       params: { 3           createContainer?: boolean; 4           bold?: boolean; 5           italic?: boolean 6       } = { 7           createContainer: true 8       }9   ): void
ParameterTypeRequiredDefaultsDescription
elementHTMLElementtrueHTML element
valuestringtrueValue to show
conditionsboolean[]trueConditions to check
colorsstring[]trueColors for conditions
createContainerbooleanfalsetrueCreate a new div container
boldbooleanfalseBold font
italicbooleanfalseItalic font

Basic Usage#

SW.UI.setConditionalColor(element, 'Value', [1>0, 1=0, 1<0], ['Red', 'Green', 'Blue']);

Response#

It will add the value text to the element with the background color corresponding to the condition that is true.


setRag#

Description#

This method can be used to display a rag.

Method(s)#

1   function setRag(element: any, value: string, 2           condition1: boolean,3           condition2: boolean, 4           condition3: boolean,5           params: { createContainer?: boolean } = { createContainer: true }6   ): string;
ParameterTypeRequiredDefaultsDescription
elementHTMLElementtrueHTML element
valuestringtrueValue to show
condition1booleantrue
condition2booleantrue
condition3booleantrue
createContainerbooleanfalsetrueCreate a new div container

Basic Usage#

SW.UI.setRag(element, "value", true, false, false);

Response#

It will add the value text to the element with the background color corresponding to the condition that is true. (case condition1 is true color = "#f7412d", condition2 color = "#ffc720", condition3 color = "#7ec880")


setVersionRag#

Description#

This method can be used to set rag considering two given versions.

Method(s)#

1   function setVersionRag(element: HTMLElement, version1: number, version2: number,2       params: { 3           createContainer?: boolean 4       } = { 5           createContainer: true 6       }7   ): void 
ParameterTypeRequiredDefaultsDescription
elementHTMLElementtrueHTML element
version1numbertrueVersion number
version2numbertrueVersion number
createContainerbooleanfalsetrueCreate a new div container

Basic Usage#

SW.UI.setVersionRag(element, 1, 2);

Response#


showComponent#

Description#

This method can be used to create a new component.

Method(s)#

1    function showComponent(element: HTMLElement, type: string, properties: object): void;
ParameterTypeRequiredDefaultsDescription
elementHTMLElementtrueHTML tag
typestringtrueComponent's type
propertiesobjecttrueComponent's properties

Basic Usage#

SW.UI.showComponent(element, "List", properties);

Example#

In the following example you can find a template for an item that will present a List of items:

function itemTemplate(itemData, itemIndex, itemElement, workspaceContext) {   var properties = {       items: [{"id":1, "value":"Blue"}, {"id":2, "value":"Red"}]   };   SW.UI.showComponent(itemElement, 'List', properties);}

showImage#

Description#

This method can be used to display an existing or default Image.

Method(s)#

1   function showImage(element: HTMLElement, documentName: "user" | "client" | "company", name: string,2       params: { 3           hasImage?: boolean; 4           size?: Size; 5           id?: string; 6           showName: boolean7       } = {8           hasImage: false,9           size: Size.SMALL,10          showName: false11      }12   ): HTMLElement
ParameterTypeRequiredDefaultsDescription
elementHTMLElementtrueHTML element
documentNamestringtrueDocument type ("user", "client", "company")
namestringtrueDocument name
hasImagebooleanfalseA flag to specify if target already has an image
sizeSizefalseImage size
idstringfalseDocument id
showNamebooleanfalseShow document name

Basic Usage#

SW.UI.showImage(element, "company", "Skills Workflow", {hasImage: true, id: "companyId"});

Response#


showImageEditor#

Description#

This method can be used to update a user, client or company image.

Method(s)#

1    function showImageEditor(element: HTMLElement, documentName: "user" | "client" | "company", documentId: string,2       params: {3           endpoint?: string;4           size?: Size;5           width?: number;6           height?: number;7           imageStyle?: string;8       } = {9           size: Size.LARGE,10          width: 100,11          height: 10012      }13  ): HTMLElement
ParameterTypeRequiredDefaultsDescription
elementHTMLElementtrueHTML element
documentNamestringtrueImage from document user, client or company
documentIdstringtrueDocument id
endpointstringfalseImage's endpoint
sizeSizefalselargeImage's size to be displayed(small, medium, large)
widthnumberfalse100Container width in pixels
heightnumberfalse100Container height in pixels
imageStylestringfalseSetting height & width in string format

Basic Usage#

SW.UI.showImageEditor(element, "company", "companyId");

Response#

It will add the document image with an event listener 'change' to change it.


showPriority#

Description#

This method can be used to define an element priority.

Method(s)#

1    function showPriority(element: HTMLElement, priorityValue: number): void;
ParameterTypeRequiredDefaultsDescription
elementHTMLElementtrueHTML element
priorityValuenumberfalseDefine element's priority

Basic Usage#

SW.UI.showPrioruty(element, 1);

Response#


showStage#

Description#

This method can be used to display a stage.

Method(s)#

1   function showStage(element: HTMLElement, name: string, color: string,2       params: { 3           grouping?: boolean; 4           groupCount?: number 5       } = {}6   ): void
ParameterTypeRequiredDefaultsDescription
elementHTMLElementtrueHTML element
namestringfalseStage name
colorstringfalseElement's color
groupingbooleanfalseA flag to define if target is grouped
groupCountnumberfalseSet the number of elements to group

Basic Usage#

SW.UI.showStage(element, "Test", "blue");

Response#


showTags#

Description#

This method can be used to display tags.

Method(s)#

1    function showTags(element: HTMLElement, tags: string = null): void;
ParameterTypeRequiredDefaultsDescription
elementHTMLElementtrueHTML element
tagsstringfalseTags to show

Basic Usage#

SW.UI.showTags(element, "{Label: Skills, Color: #333}");

Response#


showTeam#

Description#

This method can be used to display teams.

Method(s)#

1   function showTeam(2       element: HTMLElement, 3       data: any, 4       idsFieldName: string, 5       namesFieldName: string, 6       hasImageFieldName: string,7       params: { 8           size?: Size 9       } = { 10          size: Size.SMALL 11      }12  ): void
ParameterTypeRequiredDefaultsDescription
elementHTMLElementtrueHTML element
dataanytrueA set of data
idsFieldNamestringtrueUsers identifier
namesFieldNamestringtrueUsers name
hasImageFieldNamestringtrueFlag if executers have images
sizeSizefalsesmallImage's size

Basic Usage#

SW.UI.showTeam(element, data, "UserIds", "UserNames", "UserHasImages", {size: "large"});

Response#


showWorkload#

Description#

This method can be used to display assignments workload.

Method(s)#

1    function showWorkload(element: string | HTMLElement, assignmentId: string): Promise<void>
ParameterTypeRequiredDefaultsDescription
elementstring | HTMLElementtrueHTML element or string
assignmentIdstringtrueAssignment id

Basic Usage#

SW.UI.showWorkload(element, 'assignmentId');

Response#