استفاده از دکمه های تایید و رد برای به روزرسانی وضعیت ها در یک لیست

• هدف اصلی

کاربری آسان و سریع برای کاربر!
هدف اصلی شرکت گرین لاین از نوشتن این مبحث آموزشی در نهایت کاربری آسان و سریع برای استفاده کنندگان از سیستم طراحی شده توسط شما می‌باشد.
یکی از مباحث پر اهمیت در طراحی سیستم برای کارشناسان فناوری اطلاعات و شیرپوینت باید مبحث کاربری سریع و آسان برای استفاده کنندگان از سیستم باشد. به گونه ای که از هدر رفتن وقت و انرژی کاربران سامانه جلوگیری شود. شرکت گرین لاین در طراحی سامانه های خود نیز به این موضوع اهمیت ویژه ای می‌دهد.

• راهکار

شما می‌توانید با قرار دادن دکمه های دسترسی سریع، به روزرسانی وضعیت ها در یک لیست شیرپوینت را برای کاربران سریع و آسان تر کنید. به طوری که با استفاده از این دکمه ها در همان نمای لیست شیرپوینتی عملیات مربوطه انجام شود و نیازی به ویرایش هر یک از موارد لیست به صورت جداگانه نباشد.

• موارد استفاده

شما در هر لیستی که نیاز داشته باشید یک عملیات مشخص مانند به روزرسانی وضعیت ها در یک لیست را برای چندین مورد تکرار کنید، می‌توانید از دکمه های دسترسی سریع استفاده نمایید. تا فقط با زدن دکمه عملیات مدنظرتان انجام شود؛ اما یکی از پر کاربرد ترین موارد استفاده از آن‌ها در کارتابل کاربران می‌باشد. که با استفاده از دکمه های تایید و رد و… می‌تواند عملیات دریافت وظایف و انتقال آن به دیگر افراد و … را انجام دهد.
کارتابلی که دارای ویژگی دسترسی سریع باشد، علاوه بر کارایی بسیار بالا، نمای کاربرپسندتری هم از لیست های ساده خواهد داشت. زیرا شما می‌توانید با استفاده از آیکون‌های دلخواه خود دکمه های مختلف را برای کاربران انتخاب نمایید.

چگونگی استفاده از دکمه ها برای به روز رسانی وضعیت ها در یک لیست

به منظور استفاده از دکمه ها برای انجام عملیات موردنظر، ما نیاز به استفاده از یک فایل جاوا اسکریپت(js) داریم که آن را در کتابخانه شیرپوینت آپلود و در صفحه مربوطه به لیست خود متصل کنیم.

چگونگی انجام این کار را به صورت مرحله به مرحله توضیح خواهیم داد:

1. ابتدا باید در لیست شیرپوینتی خود ستون هایی جهت قرار دادن دکمه ها در آن‌ها بسازیم. (در این نمونه شما سه ستون با نام های QuickApp، QuickRej و QuickRevise بسازید و سپس می‌توانید پس از ساختن آن‌ها نام هایشان را ویرایش کرده و به تایید، رد و بازگشت تغییر دهید.)
2. آیکون های مدنظر جهت استفاده در ستون‌های لیست خود را در یک کتابخانه شیرپوینت بارگذاری می‌کنیم.
3. به سراغ نوشتن فایل js مربوط به لیست خود می‌رویم. در این قسمت شما می‌توانید از نمونه کدهای شرکت گرین لاین که در بخش آخر مقاله قرار داده شده است، استفاده نمایید. (برای استفاده از این نمونه کد ها، شما باید فقط موارد مربوط به آدرس عکس ها، آدرس سایت، عنوان ستون ها و لیست ها و آلرت های مربوطه را تغییر دهید. همچنین شما می‌توانید با استفاده از JSOM عملیات تعریف شده در فانکشن هارا هم تغییر دهید.)
4. فایل js مربوطه را در یک کتابخانه شیرپوینت آپلود کرده و آدرس آن را کپی کنید. آدرس فایل باید به شکل زیر باشد:

SiteCollection/SubSite/SiteAssets/MyFile.js~

5. سپس یک نما از لیست شیرپوینتی خود که شامل ستون‌های ساخته شده یعنی تایید، رد، بازگشت و همچنین ستون محتوای مربوطه (Related Items) می‌باشد بسازید.
6. به قسمت ویرایش صفحه در نمای مورد نظر بروید. 

7. به بخش تنظیمات وب پارت لیست خود بروید. 

8. آخرین دسته بندی تنظیمات وب پارت (Miscellaneous یا متفرقه) را باز کرده و در قسمت JS Link یا پیوند JS، آدرس فایل خود را قرار دهید.

9. سپس تایید و ویرایش صفحه را متوقف کنید.

اکنون فقط کافیست تا صفحه خود را با ctrl+f5 رفرش کرده و از نمای جدید لیست خود لذت ببرید. از این به بعد کاربران شما با زدن دکمه های مربوط به هر آیتم می‌توانند وضعیت آن‌ها را به حالت تایید، رد و یا بازگشت تغییر دهند و عملیات به روز رسانی وضعیت ها را در لیست انجام دهند. همچنین با استفاده از دکمه مشاهده اطلاعات در مواردی که لینکی وجود داشته باشد، مورد مربوطه را باز می‌کند.

نمونه کد جاوا اسکریپت تیم گرین لاین برای به روز رسانی وضعیت ها در یک لیست

(function () {
    function view(ctx, field) {
        var editButtonHtml = (new ComputedFieldRenderer(field.Name)).RenderField(
            ctx, field, ctx.CurrentItem, ctx.ListSchema);
            var editButtonHtml =
            "<a href='#' title='Show'><img src='.../SiteAssets/Edit.png' " +
                "onclick='OpenUrl(\""+ ctx.CurrentItem.WorkflowLink.replace("DispForm", "EditForm") + "\",\"" + ctx.CurrentItem.ID + "\");return false;'/></a>";           
        return editButtonHtml;
    }
            function AppBtnFormatcor(ctx, field) {
    var editButton = (new ComputedFieldRenderer(field.Name)).RenderField(
            ctx, field, ctx.CurrentItem, ctx.ListSchema);
            var editButton =
            "<a href='#' title='Quick'><img src='.../SiteAssets/Approve.png' " +
                "onclick='updateListItemAppCor(\"" + ctx.CurrentItem.ID + "\");return false;'/></a>";
        return editButton;       
    }
    function RejBtnFormatcor(ctx, field) {
    var editButton = (new ComputedFieldRenderer(field.Name)).RenderField(
            ctx, field, ctx.CurrentItem, ctx.ListSchema);

            var editButton =
            "<a href='#' title='Quick'><img src='.../SiteAssets/Reject.png' " +
                "onclick='updateListItemRejCor(\"" + ctx.CurrentItem.ID + "\");return false;'/></a>";
            
       
        return editButton;
                
    }
  function ReviseBtnFormatcor(ctx, field) {
    var editButton = (new ComputedFieldRenderer(field.Name)).RenderField(
            ctx, field, ctx.CurrentItem, ctx.ListSchema);

            var editButton =
            "<a href='#' title='Quick'><img src='.../SiteAssets/Revise.png' " +
                "onclick='updateListItemReviseCor(\"" + ctx.CurrentItem.ID + "\");return false;'/></a>";
            
       
        return editButton;
                
    }
    
    function preTaskFormRenderer(ctx) {
       modifyHeaderData(ctx);       
    }
    
    function modifyHeaderData(ctx)
    {
        var columns = ctx.ListSchema.Field;
        for (var i = 0, len = columns.length; i < len; i++) 
        {
            if(columns[i].Name == "WorkflowLink") columns [i].DisplayName = "مشاهده اطلاعات";
        }
    }
    
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.OnPreRender = preTaskFormRenderer;
    overrideCtx.Templates.Fields = {
        'WorkflowLink': {
            'View': view
         },
    'QuickApp': {
            'View': AppBtnFormatcor
         },
    'QuickRej': {
            'View': RejBtnFormatcor
         },
    'QuickRevise': {
            'View': ReviseBtnFormatcor
         },
         
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();


  //Open Url  
function OpenUrl(ItemUrl)
{
    debugger
    var options = {
    title: "",
    width: 1500,
    height: 800,
    url: ItemUrl , 
    dialogReturnValueCallback: function(res,arg){
        debugger
        if (res==1)
            location.reload()
    }
    };
    SP.UI.ModalDialog.showModalDialog(options);
}
//Quick Approve
var siteUrlCor = '.../Meeting/';

function updateListItemAppCor(ID) {

    var clientContext = new SP.ClientContext(siteUrlCor);
    var oList = clientContext.get_web().get_lists().getByTitle('Workflow Tasks');
   
    this.oListItem = oList.getItemById(ID);
    
    oListItem.set_item('Status', 'تکمیل گردید');
    oListItem.set_item('Approval', 'تایید');
    oListItem.update();
   clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceededApp), Function.createDelegate(this, this.onQueryFailedApp));
}

function onQuerySucceededApp() {
   alert('درخواست مورد نظر تایید شد');
   location.href = location.href
}

function onQueryFailedApp(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
//Quick Reject
var siteUrlCor = '.../Meeting/';
function updateListItemRejCor(ID) {

    var clientContext = new SP.ClientContext(siteUrlCor);
    var oList = clientContext.get_web().get_lists().getByTitle('Workflow Tasks');
    var desctiption = prompt("لطفا توضیحات مربوطه را جهت عدم موافقت بنویسید:","");

    this.oListItem = oList.getItemById(ID);
    
    oListItem.set_item('Status', 'تکمیل گردید');
    oListItem.set_item('Approval', 'رد');
    oListItem.set_item('ApprovalDes', desctiption);
    oListItem.update();
   clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceededRej), Function.createDelegate(this, this.onQueryFailedRej));
}

function onQuerySucceededRej() {
    alert('درخواست مورد نظر رد شد');
   location.href = location.href
}

function onQueryFailedRej(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
//Quick Revise
var siteUrlCor = '.../Meeting/';
function updateListItemReviseCor(ID) {

    var clientContext = new SP.ClientContext(siteUrlCor);
    var oList = clientContext.get_web().get_lists().getByTitle('Workflow Tasks');
    var desctiption = prompt("لطفا توضیحات مربوطه را جهت اصلاح بنویسید:","");

    this.oListItem = oList.getItemById(ID);
    
    oListItem.set_item('Status', 'تکمیل گردید');
    oListItem.set_item('Approval', 'اصلاح');
    oListItem.set_item('WorkflowOutcome', 'Approval');
    oListItem.set_item('ApprovalDes', desctiption);
    oListItem.update();
   clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceededRev), Function.createDelegate(this, this.onQueryFailedRev));
}

function onQuerySucceededRev() {
    alert('درخواست مورد نظر بازگشت داده شد');
   location.href = location.href
}
function onQueryFailedRev(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}