Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added Tooltip to ActionButton & German translation #155

Merged
merged 1 commit into from
Nov 9, 2023
Merged

Added Tooltip to ActionButton & German translation #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions ActionButton/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
module.exports = {
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
parserOptions: {
ecmaVersion: 2020, // Allows the use of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
project: './tsconfig.json' // Point to your project's tsconfig.json
},
rules: {
// Place to specify ESLint rules - can be used to overwrite rules specified from the extended configurations
// For example, to turn off a rule:
// 'no-unused-vars': 'off',
}
};
103 changes: 60 additions & 43 deletions ActionButton/ActionButton/ButtonControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,76 @@
import * as React from 'react'
import {Stack} from '@fluentui/react/lib/Stack';
import {IBaseButtonProps, IBaseButtonState, IButtonStyles, PrimaryButton} from '@fluentui/react/lib/Button';
import { Stack } from '@fluentui/react/lib/Stack';
import { IBaseButtonProps, IBaseButtonState, IButtonStyles, PrimaryButton, IconButton } from '@fluentui/react/lib/Button';
import { IIconProps } from '@fluentui/react';
import { IconButton } from 'office-ui-fabric-react/lib/components/Button/IconButton/IconButton';
import { TooltipHost } from '@fluentui/react/lib/Tooltip';

export interface IButtonControlProps extends IBaseButtonProps{
hoverBackgroundColor:string,
hoverBorderColor:string,
hoverColor:string,
checkedBackgroundColor:string,
checkedBorderColor:string,
checkedColor:string,
iconName:string | null
}
export interface IButtonControlProps extends IBaseButtonProps {
hoverBackgroundColor: string,
hoverBorderColor: string,
hoverColor: string,
checkedBackgroundColor: string,
checkedBorderColor: string,
checkedColor: string,
iconName: string | null,
toolTip: string | undefined,
}

export default class ButtonControl extends React.Component<IButtonControlProps, IBaseButtonState>{
constructor(props :IButtonControlProps){
constructor(props: IButtonControlProps) {
super(props);
}
styles : IButtonStyles ={
root:{
backgroundColor:this.props.style?.backgroundColor ?? "#0078d4",
borderColor:this.props.style?.borderColor ?? "#0078d4",
color:this.props.style?.color ?? "#FFFFFF",
width:this.props.style?.width
styles: IButtonStyles = {
root: {
backgroundColor: this.props.style?.backgroundColor ?? "#0078d4",
borderColor: this.props.style?.borderColor ?? "#0078d4",
color: this.props.style?.color ?? "#FFFFFF",
width: this.props.style?.width
},
rootHovered:{
backgroundColor:this.props.hoverBackgroundColor ?? "#106EBE",
borderColor:this.props.hoverBorderColor ?? "#106EBE",
color:this.props.hoverColor ?? "#FFFFFF",
width:this.props.style?.width
rootHovered: {
backgroundColor: this.props.hoverBackgroundColor ?? "#106EBE",
borderColor: this.props.hoverBorderColor ?? "#106EBE",
color: this.props.hoverColor ?? "#FFFFFF",
width: this.props.style?.width
},
rootPressed:{
backgroundColor:this.props.checkedBackgroundColor ?? "#0078d4",
borderColor:this.props.checkedBorderColor ?? "#0078d4",
color:this.props.checkedColor ?? "#FFFFFF",
width:this.props.style?.width
rootPressed: {
backgroundColor: this.props.checkedBackgroundColor ?? "#0078d4",
borderColor: this.props.checkedBorderColor ?? "#0078d4",
color: this.props.checkedColor ?? "#FFFFFF",
width: this.props.style?.width
}
}

icon : IIconProps = {iconName : this.props.iconName ?? ""};
icon: IIconProps = { iconName: this.props.iconName ?? "" };

render(){
if(this.props.text?.trim().length ?? 0 > 0)
return(
<Stack horizontal>
<PrimaryButton iconProps={this.icon} styles={this.styles} text={this.props.text} disabled={this.props.disabled} onClick={this.props.onClick}/>
</Stack>
);
else return(
render() {
const toolTipId = `tooltip_${this.props.iconName}`;

<Stack horizontal>
<IconButton iconProps={this.icon} styles={this.styles} disabled={this.props.disabled} onClick={this.props.onClick}/>
</Stack>
);
}
return (
<Stack horizontal>
{this.props.text?.trim().length ? (
<TooltipHost content={this.props.toolTip} id={toolTipId}>
<PrimaryButton
iconProps={this.icon}
styles={this.styles}
text={this.props.text}
disabled={this.props.disabled}
onClick={this.props.onClick}
aria-describedby={toolTipId}
/>
</TooltipHost>
) : (
<TooltipHost content={this.props.toolTip} id={toolTipId}>
<IconButton
iconProps={this.icon}
styles={this.styles}
disabled={this.props.disabled}
onClick={this.props.onClick}
aria-describedby={toolTipId}
/>
</TooltipHost>
)}
</Stack>
);
}
}

8 changes: 4 additions & 4 deletions ActionButton/ActionButton/ControlManifest.Input.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest>
<control namespace="MscrmTools" constructor="ActionButton" version="0.1.10" display-name-key="ActionButton_Display_Key" description-key="ActionButton_Desc_Key" control-type="standard" preview-image="imgs/logo.png">
<control namespace="MscrmTools" constructor="ActionButton" version="0.1.15" display-name-key="ActionButton_Display_Key" description-key="ActionButton_Desc_Key" control-type="standard" preview-image="imgs/logo.png">
<!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
<property name="BoundAttribute" display-name-key="BoundAttribute_Display_Key" description-key="BoundAttribute_Desc_Key" of-type-group="ValidTypes" usage="bound" required="true" />
<property name="ActionText" display-name-key="ActionText_Display_Key" description-key="ActionText_Desc_Key" of-type="SingleLine.Text" default-value="" usage="input" required="false" />
Expand All @@ -20,13 +20,12 @@
<property name="HoverBackColor" display-name-key="HoverBackColor_Display_Key" description-key="HoverBackColor_Desc_Key" of-type="SingleLine.Text" default-value="#106EBE" usage="input" required="false" />
<property name="HoverBorderColor" display-name-key="HoverBorderColor_Display_Key" description-key="HoverBorderColor_Desc_Key" of-type="SingleLine.Text" default-value="#106EBE" usage="input" required="false" />
<property name="HoverColor" display-name-key="HoverColor_Display_Key" description-key="HoverColor_Desc_Key" of-type="SingleLine.Text" default-value="#FFFFFF" usage="input" required="false" />

<property name="PressedBackColor" display-name-key="PressedBackColor_Display_Key" description-key="PressedBackColor_Desc_Key" of-type="SingleLine.Text" default-value="#0078d4" usage="input" required="false" />
<property name="PressedBorderColor" display-name-key="PressedBorderColor_Display_Key" description-key="PressedBorderColor_Desc_Key" of-type="SingleLine.Text" default-value="#0078d4" usage="input" required="false" />
<property name="PressedColor" display-name-key="PressedColor_Display_Key" description-key="PressedColor_Desc_Key" of-type="SingleLine.Text" default-value="#FFFFFF" usage="input" required="false" />

<property name="IconName" display-name-key="IconName_Display_Key" description-key="IconName_Desc_Key" of-type="SingleLine.Text" usage="input" required="false" />
<type-group name="ValidTypes">
<property name="ToolTip" display-name-key="ToolTip_Display_Key" description-key="ToolTip_Desc_Key" of-type="SingleLine.Text" usage="input" required="false" />
<type-group name="ValidTypes">
<type>DateAndTime.DateAndTime</type>
<type>DateAndTime.DateOnly</type>
<type>SingleLine.Text</type>
Expand All @@ -35,6 +34,7 @@
<code path="index.ts" order="1" />
<resx path="strings/ActionButton.1033.resx" version="1.0.0" />
<resx path="strings/ActionButton.1036.resx" version="1.0.0" />
<resx path="strings/ActionButton.1031.resx" version="1.0.0" />
</resources>
</control>
</manifest>
59 changes: 27 additions & 32 deletions ActionButton/ActionButton/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,23 @@
import {IInputs, IOutputs} from "./generated/ManifestTypes";
import { IInputs, IOutputs } from "./generated/ManifestTypes";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import ButtonControl, { IButtonControlProps } from "./ButtonControl";
import { initializeIcons } from '@fluentui/font-icons-mdl2';
import { AwayStatusIcon, SettingsIcon } from '@fluentui/react-icons';


export class ActionButton implements ComponentFramework.StandardControl<IInputs, IOutputs> {

private container: HTMLDivElement;
private notifyOutputChanged: () => void;
private currentValue:string|null;
private actionText:string;
private id:string;
private sendId:boolean;
private controlType : string;
private currentValue: string | null;
private actionText: string;
private id: string;
private sendId: boolean;
private controlType: string;
/**
* Empty constructor.
*/
constructor()
{
constructor() {
initializeIcons();
}

Expand All @@ -31,27 +29,26 @@ export class ActionButton implements ComponentFramework.StandardControl<IInputs,
* @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
* @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
*/
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
{
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement) {
this.container = container;
this.notifyOutputChanged = notifyOutputChanged;

this.actionText = context.parameters.ActionText.raw??"";
this.id = context.parameters.Id.raw??"";
this.sendId = context.parameters.SendId.raw === "1";
this.actionText = context.parameters.ActionText.raw ?? "";
this.id = context.parameters.Id.raw ?? "";
this.sendId = context.parameters.SendId.raw === "1";

// @ts-ignore
this.controlType = context.parameters.BoundAttribute.attributes.Type;

if(this.actionText.trim().startsWith("{")){
if (this.actionText.trim().startsWith("{")) {
let json = JSON.parse(this.actionText);
try{
this.actionText = json[context.userSettings.languageId];
if(this.actionText === undefined){
this.actionText = json[parseInt(Object.keys(json)[0])];
}
try {
this.actionText = json[context.userSettings.languageId];
if (this.actionText === undefined) {
this.actionText = json[parseInt(Object.keys(json)[0])];
}
}
catch{
catch {
this.actionText = json[parseInt(Object.keys(json)[0])];
}
}
Expand All @@ -61,7 +58,7 @@ export class ActionButton implements ComponentFramework.StandardControl<IInputs,

private renderControl(context: ComponentFramework.Context<IInputs>): void {

let props :IButtonControlProps={
let props: IButtonControlProps = {
text: this.actionText,
disabled: context.parameters.EnableButtonOnDisabledForm.raw === "1" ? false : context.mode.isControlDisabled,
style: {
Expand All @@ -77,7 +74,8 @@ export class ActionButton implements ComponentFramework.StandardControl<IInputs,
checkedBorderColor: context.parameters.PressedBorderColor.raw ?? "#0078d4",
checkedColor: context.parameters.PressedColor.raw ?? "#FFFFFF",
iconName: context.parameters.IconName.raw,
onClick: () => { this.notifyOutputChanged(); }
toolTip: context.parameters.ToolTip.raw ?? "",
onClick: () => { this.notifyOutputChanged(); }
}

ReactDOM.render(React.createElement(ButtonControl, props), this.container);
Expand All @@ -88,23 +86,21 @@ export class ActionButton implements ComponentFramework.StandardControl<IInputs,
* Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
*/
public updateView(context: ComponentFramework.Context<IInputs>): void
{
public updateView(context: ComponentFramework.Context<IInputs>): void {
this.renderControl(context);

this.currentValue = context.parameters.BoundAttribute.raw?? "";
this.currentValue = context.parameters.BoundAttribute.raw ?? "";
}

/**
* It is called by the framework prior to a control receiving new data.
* @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
*/
public getOutputs(): IOutputs
{
if(this.controlType === "string"){
public getOutputs(): IOutputs {
if (this.controlType === "string") {
return {
BoundAttribute: this.sendId ? this.id : this.actionText
};
};
}

return {
Expand All @@ -116,8 +112,7 @@ export class ActionButton implements ComponentFramework.StandardControl<IInputs,
* Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
* i.e. cancelling any pending remote calls, removing listeners, etc.
*/
public destroy(): void
{
public destroy(): void {
// Add code to cleanup control if necessary
}
}
Loading