/
/
/
/
**تعریف فعال کردن و غیر فعال کردن Container :**
```js
function makeContainerReadOnly(viewModel, name, parentName, readOnlyStatus) {
const containerID = formHelper.getFieldObject(viewModel, name, parentName, FormBuilderStatics.Config).Id;
const fields = Object.keys(['', null].includes(parentName) ? viewModel.fields : viewModel.fields[parentName])
.filter(item => item.endsWith(FormBuilderStatics.Config))
.map(item => item.slice(0, item.length - FormBuilderStatics.Config.length))
.filter(item => formHelper.getFieldObject(viewModel, item, parentName, FormBuilderStatics.Config).ContainerId === containerID);
for(const field of fields) {
const config = formHelper.getFieldObject(viewModel, field, parentName, FormBuilderStatics.Config);
switch(config.type) {
case GBFieldType.Container:
makeContainerReadOnly(viewModel, field, parentName, readOnlyStatus);
break;
case GBFieldType.HTML:
case GBFieldType.GPS:
break;
case GBFieldType.SubForm:
let subformFields;
if(['', null].includes(parentName)) subformFields = viewModel.fields;
else subformFields = viewModel.fields[parentName];
subformFields[field + FormBuilderStatics.ReadOnly](readOnlyStatus);
break;
default:
const instance = formHelper.getFieldObject(viewModel, field, parentName, FormBuilderStatics.Instance);
if(instance) instance.option('readOnly', readOnlyStatus);
}
}
}
// نحوه فراخوانی تابع برای فعال و غیر فعال کردن Container :
makeContainerReadOnly(viewModel, FIELD_NAME_HERE, PARENT_FIELD_NAME_HERE, READONLY_STATUS)
```
**نمایش و عدم نمایش Container :**
```js
viewModel.fields.CONTAINER_FIELD_NAME_Visibility(true | false)
//CONTAINER_FIELD_NAME = نام لاتین Container
```
**بررسی تعداد فایل های بارگذاری شده قبل از ثبت نهایی :**
```js
//متغیر سراسری جهت انتقال به آدرس جدید
export let redirectUrl = '';
// تابعی که موقع کلیک روی فیلد دکمه فراخوانی میشود
export const onButtonFieldClick = function (buttonName, viewModel, record) {
//توجه*** متغیر رکورد تنها درصورتی پاس داده میشود که از طریق دیتاگرید ساب فرم روی دکمه کلیک شده باشد***
if (buttonName === 'ShowNumberOfFileUpoad') {
// نمایش تعداد فایل های آپلود شده در یک فیلد متنی
viewModel.fields.FileUpload_Instance.option('value').length // FileUpload = نام فیلد
}
}
//تابعی که در زمان لود فرم فراخوانی میشود
export const onLoad = function (viewModel) {
}
```
**دریافت اطلاعات مربوط به فایل آپلود شده:**
```js
viewModel.fields.fieldname_Instance.option("value")[ایندکس]
// fieldname = نام لاتین فیلد فرم ساز
```
**ست کردن پیام برای نمایش به کاربر بعد از آپلود فایل :**
```js
viewModel.fields.fieldname_Instance.option("uploadedMessage")
// fieldname = نام لاتین فیلد فرم ساز
```
**مشخص کردن حجم فایل :**
```js
// حداقل حجم فایل
viewModel.fields.fieldname_Instance.option("minFileSize",80000)
// fieldname = نام لاتین فیلد فرم ساز
// حداکثر حجم فایل
viewModel.fields.fieldname_Instance.option("maxFileSize",1000)
```
**ست کردن پیغام خطا برای حداقل و حداکثر سایز :**
```js
// حداقل
viewModel.fields.fieldname_Instance.option("invalidMinFileSizeMessage","")
// fieldname = نام لاتین فیلد فرم ساز
// حداکثر
viewModel.fields.fieldname_Instance.option("invalidMaxFileSizeMessage","")
```
**دریافت اطلاعت مربوط به نوع فابل ها قابل آپلود :**
```js
viewModel.fields.fieldname_Instance.option("acceptExtensionWithSize")
// fieldname = نام لاتین فیلد فرم ساز
```
**ست کردن عنوان فایل آپلود :**
```js
viewModel.fields.fieldname_Instance.option("labelText","")
// fieldname = نام لاتین فیلد فرم ساز
```
**فعال و یا غیر فعال کردن امکان بارگذاری چندین فایل :**
```js
viewModel.fields.fieldname_Instance.option("labelText",[false or true])
// fieldname = نام لاتین فیلد فرم ساز
```
**دریافت نام فایل آپلود :**
```js
viewModel.fields.fieldname_Instance.option("name")
// fieldname = نام لاتین فیلد فرم ساز
```
**ست کردن عنوان دکمه فایل آپلود :**
```js
viewModel.fields.fieldname_Instance.option("selectButtonText","")
// fieldname = نام لاتین فیلد فرم ساز
```
**ست کردن پیام بعد از آپلود موفق فایل :**
```js
viewModel.fields.fieldname_Instance.option("uploadedMessage","")
// fieldname = نام لاتین فیلد فرم ساز
```
**ست کردن پیام بعد از آپلود ناموفق فایل :**
```js
viewModel.fields.fieldname_Instance.option("uploadFailedMessage","")
// fieldname = نام لاتین فیلد فرم ساز
```
همانطور که در جریان هستید، ساب فرم یک فیلد شامل چندین فیلد دیگر به صورت آرایه ای از Object است.
برای مثال، اگر یک ساب فرمی به نام MySubForm شامل 2 فیلد به نام های MyTextBox و MyNumberBox داشته باشیم ساختار داده ساب فرم به این صورت است:
```js
[
{
Id: 1,
gb_state: 1,
MyTextField: 'Text field value 1',
MyNumberField: 456
},
{
Id: 2,
gb_state: 1,
MyTextField: 'Text field value 2',
MyNumberField: 13
},
{
Id: 3,
gb_state: 1,
MyTextField: 'Text field value 2',
MyNumberField: null
}
]
```
که البته تمامی مقادیر object ها بصورت observable هستند.
در اینجا علاوه بر MyNumberField و MyTextField دو مقدار دیگر هم میبینیم: Id و gb_state.
**فیلد Id چیست؟** وقتی شما یک فرمی بسازید معادل آن فرم در پایگاه داده یک جدول ذخیره خواهد شد. در صورتی که فرم شما شامل یک ساب فرم باشد معادل آن ساب فرم هم یک جدول در پایگاه داده ایجاد میشود که با استفاده از کلید خارجی با هم مرتبط میشوند.
Id در واقع شناسه رکورد ساب فرم شماست که بعد از ذخیره فرم در جدول ساب فرم ذخیره خواهد شد.
**فیلد gb_state چیست؟** این فیلد در واقع وضعیت این رکورد را مشخص میکند:
1. **مقدار 1 یا RecordStateType.new:** این مقدار به این معنی است که این رکورد به تازگی ایجاد شده است و به بک اند میگوید که این رکورد بایستی در پایگاه داده ایجاد شود. بنابراین اگر با استفاده از CustomJS رکورد جدیدی بصورت دستی برای ساب فرم بسازید و این فیلد را به درستی مقدار دهی نکنید موقع ذخیره نهایی فرم رکورد شما در پایگاه داده ایجاد نخواهد شد. **پس به طور کلی هرموقع رکورد جدیدی برای ساب فرم ساختید حتما باید مقدار gb_state برابر با 1 باشد.**
2. **مقدار 0 یا RecordStateType.unchange:** این مقدار فقط در حالت ویرایش به کار میرود و به این معنی است که این رکورد هیچ گونه تغییری نداشته است. وقتی بک اند وضعیت رکورد را در این حالت ببیند در پایگاه داده هیچ گونه تغییری ایجاد نمیکند. پس اگر مقدار یک رکوردی را در ساب فرم به صورت دستی تغییر دادید اما مقدار gb_state که قبلا برابر با 0 بوده را به مقدار 2 تغییر دادید مقدار جدید شما در پایگاه داده ثبت نخواهد شد.
3. **مقدار 2 یا RecordStateType.edit:** این مقدار فقط در حالت ویرایش بکار میرود و به این معنی است که این رکورد تغییراتی داشته و بک اند باید آن تغییرات را در پایگاه داده لحاظ کند.
4. **مقدار 3 یا RecordStateType.del:** این مقدار فقط در حالت ویرایش به کار میرود و به این معنی است که این رکورد باید از پایگاه داده حذف شود، بنابراین اگر رکوردی در حالت ویرایش داشتید و صرفا فقط از آرایه ساب فرم آن را پاک کردید بعد از ذخیره فرم این رکورد همچنان در پایگاه داده وجود خواهد داشت.
**دسترسی به داده های مدال فیلد تودرتو:**
پاپ آپ مربوط به ساب فرم چه در حالت ویرایش رکورد چه در حالت درج رکورد جدید در پس زمینه به داده های اصلی (viewModel.data()) متصل نیست، به این دلیل که شاید کاربر اقدام به ویرایش رکوردی کند اما وسط ویرایش داده منصرف شود و اقدام به بستن مدال کند.تا زمانی که کاربر روی دکمه ثبت مدال ساب فرم کلیک نکرده نباید داده های آن مدال در بخش داده های اصلی فرم ریخته شود. بنابراین داده های این مدال به یک بخش دیگری از viewModel متصل است:
```js
viewModel.MySubForm_Record()
```
وقتی شما روی دکمه جدید ساب فرم کلیک کنید، فرم ساز با توجه به فیلد های ساب فرم یک سری داده خام را میسازد و داخل این پراپرتی میریزد، سپس مدال باز شده و فیلد های آن به این داده ها متصل میشوند و بعد از اینکه کاربر روی دکمه ثبت کلیک شد فرم ساز داده هارا از _Record میخواند و داخل دیتا های اصلی (viewModel.data()) میریزد.
و برای ویرایش هم همینطور، فرم ساز در پس زمینه از رکوردی که قصد ویرایش آن را دارید یک کپی میگیرد و داخل این پراپرتی میریزد و ادامه ماجرا.
* نکته: در حالت ویرایش یا درج رکورد به صورت اینلاین فرم ساز به _Record هیچ کاری ندارد و مستقیما به viewModel.data() وصل میشود.
**سفارشی سازی مدال فیلد تودرتو:**
برای تغییر آپشن های مدال (مثلا عرض، ارتفاع، حالت تمام صفحه و...) در ابتدا باید instance مربوط به مدال را داشته باشید.
با استفاده از این کد میتوانید instance مدال را دریافت کنید:
```js
const mySubForm__modalInstance = $('#modal_MySubForm').dxPopup('instance');
```
برای مثال، جهت تغییر عرض مدال میتوانید از کد زیر استفاده کنید:
```js
mySubForm__modalInstance.option('width', '500px');
```
همانطور که قبلا ذکر شد، مدال فیلد تودرتو در واقع مدال کتابخانه devextreme است.
جهت مشاهده لیست متد ها، آپشن ها و رویداد های Popup به این صفحه مراجعه نمایید:
**سفارشی سازی گرید فیلد تودرتو:**
برای تغییر آپشن های گرید (مثلا افزودن ستون جدید، مخفی کردن یک ستون خاص و...) در ابتدا باید instance مربوط به گرید را داشته باشید.
با استفاده از این کد میتوانید instance گرید را دریافت کنید:
```js
const mySubForm__dataGridInstance = $('#grid_ MySubForm').dxDataGrid('instance');
```
برای مثال، جهت مخفی کردن یک ستون خاص باید بدین شکل عمل کنید:
```js
mySubForm__dataGridInstance.option('columns\[0\].visible', false);
```
همانطور که قبلا ذکر شد، گرید فیلد تودرتو در واقع گرید کتابخانه devextreme است.
جهت مشاهده لیست متد ها، آپشن ها و رویداد های DataGrid به این صفحه مراجعه نمایید:
**غیر فعال کردن یک یا چند آیتم فیلد انتخابی :**
```js
//SelectiveField = نام فیلد انتخابی
$('[data-name="SelectiveField"]').dxSelectBox('instance').option("item[1].disable",true);
```
**غیر فعال کردن یک یا چند آیتم فیلد انتخابی در لیست ساده با امکان جست و جو :**
```js
$("SelectBox").dxSelectBox({
onInitialized: function(e){
var dataSource = e.component.option("dataSource");
for (var i=0 ; i
در این بخش به بررسی فیلد تب میپردازیم.
هر فیلد تب شامل چندین زبانه است که هرکدام از این زبانه ها شامل تعدادی فیلد دیگر هستند.
هر زبانه تب قابلیت مخفی شدن، فقط خواندنی شدن و غیر فعال شدن را دارد.
فیلد تب هیچ دخالتی در ساختار داده فرم نمیکند و صرفا جنبه نمایشی دارد، بطور مثال اگر شما فیلد متنی خارج از تب داشته باشد و همان فیلد متنی را داخل تب ببرید هیچ تفاوتی در ساختار داده چه در سطح viewModel چه در سطح پایگاه داده نمیکند.
**سفارشی سازی فیلد های داخل تب:**
به طور پیش فرض، موقع لود فرم تمامی فیلد های فرم لود میشوند، شامل data، _Config و... . اما در صورتی که فیلد مورد نظر شما داخل تب باشد تا زمانی که کاربر وارد آن تب نشود _Instance آن فیلد لود نخواهد شد.
به عبارتی دیگر، فیلد هایی که داخل تب هستند و تب آنها لود نشده است تمامی Config و data های آن فیلد داخل viewModel هستند به غیر از _Instance که زمانی لود میشود که کاربر وارد آن تب مربوطه شود.
بنابراین به این نکته دقت کنید که در صورتی که در Custom JS خود میخواهید از Instance یک فیلد استفاده کنید حواستان باشد که آن فیلد خارج از تب باشد.
اما اگر فیلد داخل تب بود باید چه کرد؟ در این صورت باید از تابع onTabLoad مربوط به Custom JS استفاده کنید:
```js
export const onTabLoad = function (tabPanelName, tabPanelItemName, viewModel) {
if (tabPanelName === 'MyTabField') {
if (tabPanelItemName === ' MyTabFieldItem') {
viewModel.fields.MyTextField_Instance.option('hint', '...');
}
}
}
```
در مثال بالا، فرم ما یک فیلد متنی با نام MyTextField دارد که داخل تب است و ما میخواهیم hint آن را تغییر دهیم.
در این بخش به طور اختصاصی فیلد نقشه را بررسی خواهیم کرد و یک سری مثال برای این فیلد خواهیم زد.
**ساختار داده فیلد نقشه:**
در فیلد نقشه، ساختار داده به صورت JSON رشته شده و از نوع GeoJSON است و همچنین در صورتی که نقشه هیچ مقداری نداشته باشد مقدار آن Null خواهد بود.
در اینجا یک مثال از فیلد نقشه با یک point که موقعیت آن میدان آزادی تهران است را میبینیم:
```js
{"type":"FeatureCollection","features":\[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":\[51.337931,35.699747\]}}\]}
```
مجددا تاکید میشود که این داده از نوع رشته است.
بنابراین وقتی شما بخواهید مقدار فیلد نقشه را با استفاده از Custom JS تغییر دهید و هر مقدار دیگری به آن انتصاب دهید کافیست با این ساختار JSON بصورت رشته ای مقدار مورد نظر خود را انتصاب دهید.
جهت آشنایی بیشتر با نوع داده JeoJSON به این صفحه مراجعه کنید:
---
**تشخیص تغییر مقدار نقشه:**
در قسمت های قبلی آموزش به این نکته پرداخته شد که برای تشخیص تغییر مقدار فیلد، مثلا فیلد متنی باید از رویداد onValueChanged استفاده کنیم، اما برای فیلد نقشه متفاوت است.
برای تشخیص تغییر مقدار فیلد نقشه بدین صورت عمل کنید:
```js
viewModel.data().MyMapField.subscribe(newValue => {
console.log('Map value has changed', newValue);
});
```
البته این روش برای فیلد های دیگر هم جوابگو است، اما پیشنهاد میشود برای فیلد های دیگر از همان روش ذکر شده استفاده کنید.
در این مثال، به محض تغییر مقدار فیلد نقشه (اضافه کردن point، rectangle، حذف آنها و...) تابع ما اجرا میشود که مقدار جدید فیلد نقشه را در قالب GeoJSON به صورت رشته میگیرد.
---
**تشخیص ساخت لایه جدید:**
در مثال بالا به طور کلی هرموقع مقدار فیلد نقشه تغییر کند تابع ما اجرا میشود اما شاید در مواقعی نیاز داشته باشیم که ساخت لایه جدید را تشخیص دهیم.
با استفاده از این کد میتوانید ساخت لایه جدید در نقشه را تشخیص دهید:
```js
const oldLayers = [];
viewModel.data().MyMapField.subscribe(newValue => {
try {
newValue = JSON.parse(newValue);
} catch(e) {}
if(!newValue) return;
const createdLayer = newValue?.features.find(layer => !oldLayers.find(i => _.isEqual(i, layer)));
if(createdLayer) {
oldLayers.push(createdLayer);
console.log('New layer created', createdLayer);
}
});
```
در کد بالا یک آرایه به اسم oldLayers تعریف شده است که لایه هایی که کاربر از قبل ساخته را در خود نگه میدارد و طبیعتا این آرایه به طور پیش فرض خالی است.
به محض اینکه مقدار فیلد نقشه تغییر کرد در ابتدا مقدار رشته ای به مقدار JSON تغییر میکند و سپس روی لایه های JeoJSON بررسی میشود که هر لایه ای که در آرایه oldLayers وجود نداشت پس قطعا به تازگی ساخته شده، در ابتدا آن لایه را داخل oldLayer میریزیم و سپس عملیات مورد نظر را روی آن انجام میدهیم.
---
**نمایش point بر اساس Lat و Lng روی نقشه:**
همانطور که در بالا گفته شد، نوع داده فیلد نقشه بصورت JeoJSON است و هر مقداری را که بصورت JeoJSON به مقدار فیلد نقشه پاس دهیم آن مقدار روی نقشه نمایش داده میشود.
بنابراین برای نمایش یک Point با یک مختصات خاص کافیست به این شکل عمل کنیم:
```js
const lng = 51.351471;
const lat = 35.69871;
viewModel.data().MyMapField(JSON.stringify({
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [lng , lat]
}
}
]
}));
```
در این مثال ما فقط یک point روی نقشه ایجاد کردیم، شما میتوانید به تعداد دلخواه روی نقشه لایه ایجاد کنید.
---
**تغییر زوم نقشه:**
برای تغییر زوم نقشه باید Instance مربوط به leaflet را داشته باشیم.
با استفاده از این کد میتوانید Instance کتابخانه Leaflet را دریافت کنید:
```js
const myMapField__leafletInstance = viewModel.fields.MyMapField_Instance.mapInstance;
```
پس از دریافت instance کتابخانه leaflet، با استفاده از این کد میتوانیم زوم نقشه را به مقدار دلخواه تغییر دهیم:
```js
myMapField__leafletInstance.setZoom(10);
```
---
**تغییر موقعیت نمایشی نقشه:**
بعد از اینکه طبق مثال بالا Instance کتابخانه Leaflet را دریافت کردید با این کد میتوانید موقعیت نمایشی را روی فیلد نقشه تعیین کنید:
```js
myMapField__leafletInstance.setView({
lng: 51.351471,
lat: 35.69871
});
```
توجه کنید که متد های Leaflet فقط به همین موارد محدود نمیشود، جهت آشنایی بیشتر با این کتابخانه به صفحه زیر مراجعه کنید:
این نوع فیلد جهت الصاق یک فایل به فرم می باشد. برای مثال دریافت عکس پرسنلی .
این گزینه این امکان را به کاربر می دهد تا فایل مورد نظر را برای شما بارگذاری و ارسال کند. فایل می تواند توسط سازنده فرم محدود به نوع و حجم آنها شود.
**تابعی که موقع کلیک روی فیلد دکمه فراخوانی میشود :**
```js
export const onButtonFieldClick = function (buttonName, viewModel, record) {
//توجه*** متغیر رکورد تنها درصورتی پاس داده میشود که از طریق دیتاگرید ساب فرم روی دکمه کلیک شده باشد***
if (buttonName === 'YOUR_OWN_BUTTON_NAME') {
// return false to avoid continue submit operation
return true;
}
}
```
**نحوه دسترسی به زبانه های تب:**
با استفاده از کد زیر میتوانید به زبانه های تب به صورت آرایه دسترسی داشته باشید:
```js
const myTabItems = viewModel.fields.MyTabFieldConfig.dataSource;
```
----
**نحوه بررسی اینکه آیا یک زبانه خاص قابل پیمایش است یا خیر:**
```js
viewModel.fields.MyTabConfig.dataSource[0].navigable();
```
دقت کنید که پراپرتی navigable داده نمیگیرد و فقط صرفا اینکه تب قابل پیمایش است یا خبر را برمیگرداند.
---
**تنظیم اجباری بودن یا نبودن فیلد های داخل زبانه تب:**
```js
viewModel.fields.MyTabConfig.dataSource[0].isRequired(true/*or false*/);
```
دقت کنید که در صورتی که به صورت دستی اجباری بودن یا نبودن زبانه تب را مشخص کنید دیگر قوائد نمایشی و... هیچ تاثیری روی آن نخواهند گذاشت.
----
**تنظیم فقط خواندنی بودن فیلد های داخل زبانه تب:**
```js
viewModel.fields.MyTabConfig.dataSource\[0\].readOnly(true/\*or false\*/);
```
دقت کنید که در صورتی که به صورت دستی فقط خواندنی بودن یا نبودن زبانه تب را مشخص کنید دیگر قوائد نمایشی و... هیچ تاثیری روی آن نخواهند گذاشت.
----
**تنظیم نمایش یا عدم نمایش بودن زبانه تب:**
```js
viewModel.fields.MyTabConfig.dataSource[0].visible(false/*or true*/);
```
دقت کنید که در صورتی که به صورت دستی نمایش یا عدم نمایش زبانه تب را مشخص کنید دیگر قوائد نمایشی و... هیچ تاثیری روی آن نخواهند گذاشت.
---
**رفتن به مرحله بعدی:**
```js
viewModel.fields.MyTabConfig.next();
```
---
**رفتن به مرحله قبلی:**
```js
viewModel.fields.MyTabConfig.prev();
```
---
**تنظیم ایندکس تب انتخاب شده:**
```js
viewModel.fields.MyTabConfig.selectedIndex(3);
```
---
**بررسی اینکه آیا رفتن به مرحله قبلی قابل انجام است یا خیر:**
```js
viewModel.fields.MyTabConfig.prevIsAvailable();// true or false
```
---
**بررسی اینکه رفتن به مرحله بعدی قابل انجام است یا خیر:**
```js
viewModel.fields.MyTabConfig.nextIsAvailable();//true or false
```
به کمک این فیلد می توان نسبت به ایجاد فرم هایی در دل فرم های دیگر برای مدیریت بهتر جمع آوری داده های پیچیده اقدام نمود.
با استفاده از این فیلد، داده های فرم های زیرمجموعه و اصلی تجمیع شده و از یک ورودی واحد ثبت می شوند.
فیلدهای تو در تو خود به عنوان زیرمجموعه ای از فرم اصلی ، دارای فیلدهای مختص خود می باشد که تعریف و تنظیم فیلدهای آن دقیقا مشابه با فرم اصلی می باشد.
این فیلد زمانی کاربرد دارد که پاسخ دهنده بتواند از بین گزینه ها یک یا چند گزینه را انتخاب کند.
مثلا: علاقه شما در تعطیلات چیست؟ مسافرت موسیقی مطالعه استراحت
با استفاده از فیلد کلید می توانید رویداد های مختلفی از جمله باز شدن فرم جدید ، باز شدن گزارش و ... را در فرم خود داشته باشید
یکی از ابزار فرم ساز استفاده از فیلد نقشه و انتخاب یک یا چند نقطه بر روی نقشه می باشد، که راهکارهای فراوانی را در اختیار شرکت ها و سازمانها قرار می دهد. به عنوان مثال: تعیین محل دقیق بازرسی بر روی نقشه