Mọi lập tr&igrave;nh vi&ecirc;n khi l&agrave;m việc với Dynamics 365 sẽ đều phải tạo PCF. Trong hệ sinh th&aacute;i của Microsoft Dynamics kh&ocirc;ng hề c&oacute; một bộ điều khiển đầu v&agrave;o ri&ecirc;ng như PCF.
Kh&ocirc;ng chỉ thế, việc c&agrave;i đặt cũng kh&ocirc;ng hề dễ d&agrave;ng mặc d&ugrave; giao diện t&iacute;nh năng b&ecirc;n ngo&agrave;i nh&igrave;n kh&aacute; đơn giản. V&agrave; việc tạo ra th&agrave;nh phần PCF th&igrave; lu&ocirc;n l&agrave; một vấn đề kh&aacute; &ldquo;khoai&rdquo; đối với c&aacute;c lập tr&igrave;nh vi&ecirc;n. C&oacute; lẽ nếu bạn tự m&igrave;nh m&agrave;y m&ograve; cũng sẽ phải mất tới v&agrave;i tiếng đồng hồ.
Vậy n&ecirc;n sau khi đ&atilde; tự trải nghiệm c&agrave;i đặt, Tek4 sẽ chỉ cho c&aacute;c bạn c&aacute;ch tạo ra PCF nhanh ch&oacute;ng v&agrave; dễ hiểu.
H&atilde;y c&ugrave;ng&nbsp; nh&igrave;n v&agrave;o v&iacute; dụ sau đ&acirc;y:
<img style="width: 500px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/54238590-a7d8-40e2-bbbe-51d712fcf20b" alt="Hướng dẫn tự tạo Password PCF cho Microsoft Power Platform" />
Ch&uacute;ng ta sẽ bắt đầu bằng việc lấy một số m&atilde; boilerplate PCF bằng c&aacute;ch l&agrave;m theo c&aacute;c hướng dẫn tr&ecirc;n t&agrave;i liệu Microsoft. V&agrave; ta sẽ chỉ cần thay thế t&ecirc;n <code>LinearInputControl</code> th&agrave;nh <code>PasswordInputControl</code> v&agrave; tự đặt t&ecirc;n cho namespace.
Sau đ&oacute; ta sẽ khai b&aacute;o 5 biến b&iacute; mật (private variable). Trong đ&oacute; c&aacute;c biến <code>_eye</code> v&agrave;<code> </code><code>isVisible</code> kh&ocirc;ng phải l&agrave; ti&ecirc;u chuẩn.&nbsp;<code>_eye</code> sẽ trở th&agrave;nh n&uacute;t chuyển đổi trạng th&aacute;i v&agrave; <code>IsVisible</code> sẽ l&agrave; một biến boolean tương ứng với khả năng hiển thị của văn bản trong trường đầu v&agrave;o.
<pre class="language-python"><code>export class PasswordInputControl implements ComponentFramework.StandardControl&lt;IInputs, IOutputs&gt; {
	private _notifyOutputChanged: () =&gt; void;
	private _inputElement: HTMLInputElement;
	private _eye: HTMLButtonElement;
	private _inputValue?: string;
	private isVisible: boolean;
}</code></pre>
Tiếp theo, ta sẽ tạo một thư mục con trong <code>PasswordInputControl</code> được gọi l&agrave; css, nơi sẽ đặt code b&ecirc;n dưới trong một tệp được gọi l&agrave; <code>style.css</code> để tạo kiểu cho n&uacute;t <code>_eye</code> sao cho giống như một con mắt.
<pre class="language-python"><code>.eye {
 width: 25px;
 height: 25px;
 border: solid 1px #000;
 border-radius: 75% 15%;
 position: relative;
 transform: rotate(45deg);
 }
 
.eye:before {
 content: '';
 display: block;
 position: absolute;
 width: 17px;
 height: 17px;
 border: solid 1px #000;
 border-radius: 50%;
 left: 3px;
 top: 3px;
 }</code></pre>
Dưới đ&acirc;y, trong h&agrave;m <code>init</code>, ta sẽ th&ecirc;m tất cả c&aacute;c th&agrave;nh phần v&agrave;o container ch&iacute;nh.
Quan trọng hơn, cta sẽ th&ecirc;m một event listener (tr&igrave;nh lắng nghe sự kiện) với h&agrave;m <code>toggleState</code> (ta sẽ x&aacute;c địch sau) v&agrave;o <code>_eye</code> v&agrave; đặt boolean <code>isVisible</code> th&agrave;nh False v&igrave; văn bản trong trường mật khẩu phải bắt đầu ở dạng ẩn.
<pre class="language-python"><code>public init(context: ComponentFramework.Context&lt;IInputs&gt;, notifyOutputChanged: () =&gt; void, state: ComponentFramework.Dictionary, container:HTMLDivElement): void
	{

		this._notifyOutputChanged = notifyOutputChanged;

		// Create HTML text input element
		this._inputElement = document.createElement("input");
		this._inputElement.setAttribute("type", "password");
		this._inputElement.setAttribute("class", "passwordControl");
		this._inputElement.setAttribute("placeholder", "password");
		this._eye = document.createElement("button");


		// Extract the input value and update the input element
		this._inputValue = context.parameters.inputValue.raw || "";
		this._inputElement.value = this._inputValue;

		// Attach on change event handler
		this._inputElement.addEventListener("blur", this.onBlur);
		
		this._eye.addEventListener("click", this.toggleState);
		this._eye.setAttribute("class", "eye");
	 	this.isVisible = false; //will be used onclick


		// Add the text input to the DOM
		container.appendChild(this._inputElement);
		container.appendChild(this._eye);
	}</code></pre>
N&oacute;i c&aacute;ch kh&aacute;c, nhiệm vụ của <code>toggleState</code> l&agrave; chuyển đổi gi&aacute; trị boolean của <code>isVisible</code> (False trở th&agrave;nh True, v&agrave; True trở th&agrave;nh False).
Sau khi thực hiện bước thay đổi tr&ecirc;n, h&agrave;m <code>_notifyOutput</code> sẽ được gọi, từ đ&oacute; k&iacute;ch hoạt h&agrave;m <code>updateView</code>.
<code>UpdateView</code> chịu tr&aacute;ch nhiệm chuyển đổi khả năng hiển thị dựa tr&ecirc;n biến boolean <code>isVisible</code> (xem d&ograve;ng 14&ndash;19). Để t&igrave;m ra th&ocirc;ng b&aacute;o cho <code>OutputChanged</code> k&iacute;ch hoạt <code>updateView</code>, ta sẽ phải lưu &yacute; điều sau.&nbsp;
<pre class="language-python"><code>public toggleState = (event: Event): void =&gt; {
		// Toggles state var. False is deafult and stands for password state.
		// True stands for visibility. 		
		this.isVisible = !this.isVisible;
		console.log(this.isVisible)
		this._notifyOutputChanged();
	}

	public updateView(context: ComponentFramework.Context&lt;IInputs&gt;): void {
		// Extract the input value and update the input element
		this._inputValue = context.parameters.inputValue.raw || "";
		this._inputElement.value = this._inputValue;

		if (!this.isVisible){
			this._inputElement.setAttribute("type", "password");
		} else {
			this._inputElement.setAttribute("type", "text");
		}
	}</code></pre>
Khi code n&agrave;y được triển khai, chỉ cần điều hướng đến thư mục src v&agrave; chạy ba lệnh sau:
<code>npm install -g npm run build npm start</code>
C&aacute;c thanh phần sẽ được th&ecirc;m v&agrave;o tr&igrave;nh duyệt v&agrave; cho ph&eacute;p bạn kiểm tra v&agrave; gỡ lỗi n&oacute; bằng c&aacute;c c&ocirc;ng cụ d&agrave;nh cho nh&agrave; ph&aacute;t triển. Phần code đầy đủ mọi người c&oacute; thể tham khảo th&ecirc;m link <a href="https://github.com/AleksaZatezalo/PasswordPCF/tree/main/PasswordInputControl">Github</a>.

Admin

Hướng dẫn tự tạo Password PCF cho Microsoft Power Platform

Cùng tác giả

Admin

Có liên quan