0

页面加载后，我尝试使用下面的 JavaScript 函数在 SharePoint 列表中查看是否有当前用户是经理的请求，如果有，允许他们批准或拒绝这些请求。

 //Logic to approve events if the current user is a manager.
function promptToApproveEvents(){   
    var hostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
    var hostContext = new SP.AppContextSite(currentContext, hostUrl);
    var hostweb = hostContext.get_web();
    var list = hostweb.get_lists().getByTitle(paidTimeOffListName);

    //A caml query to get records where manager is equal to current user.
    var queryXml = "<View><Query><Where><Eq><FieldRef Name='Manager' /><Value Type='Integer'><UserID /></Value></Eq></Where></Query></View>"
    var query = new SP.CamlQuery();
    query.set_viewXml(queryXml);

    var items = list.getItems(query);

    currentContext.load(items);
    currentContext.executeQueryAsync(
    function() //on success.
        {       
        for(var i = 0;i < items.get_count();i++) {
            var item = items.getItemAtIndex(i);

            //Is the item we're looking at in need of approval?
            if (item.get_item("Approved") === false)
            {
                //Yes, prompt for approval.     
                //$('#approvalModal').modal('show'); //modals don't seem to work in loops.
                confirm("here's something in need of approval.");
            }
            else
            {
                //No, do nothing.
                alert("skip it, it doesn't need approved.");
            }
        }
    }, 
    function(sender,args){
        alert("Failed to get manager's name. Make sure your Organization Contacts list is filled out! Error: " + args.get_message()); //On fail
    }); 
}

我的问题是我认为我可以使用引导模式来提示用户输入每个未批准的请求。例如，向他们提供有关请求的一些信息，然后他们可以决定单击接受或拒绝按钮以使用类似于下面模型的提示进行判断。一旦他们对这个请求做出决定，我将运行一些代码来记录他们对这个请求的决定，然后应该提示他们下一个请求，直到 for 循环退出。

_________________________________________________________
|      Hey boss. What to you think of this request?     |
|            Name: xx                                   |
|            Reason: xx                                 |
|            Other info: xx                             |
|                                                       |
|         [ACCEPT]                  [REJECT]            |
|_______________________________________________________|

不幸的是，只有一个引导模式弹出，它在 for 循环完成后显示——这不符合每个找到的匹配项的提示的期望行为。

我基本上不确定实现这一目标的最佳方法是什么。似乎警报和确认框像我想要的那样“暂停”执行，并按预期行事。（例如，如果我有 2 个未批准的请求和 1 个已批准的请求，上面的代码会按预期弹出两个“确认”框和一个“警报”。）但是它们的样式根本不适合我的应用程序的其余部分，并且他们还有一个“X”按钮，我不想在我的提示中出现（他们应该被迫明确地点击接受或拒绝。）

关于我应该采取什么方法的任何建议？

4

2 回答 2

1

由于引导程序上的模态调用是异步的，因此您需要对异步调用的流程进行一些控制。这可以通过手动完成，但通常是一个巨大的头痛（至少对我来说）。

为此有一些库（如 q、async 等）。但我推荐https://github.com/caolan/async，因为它是更容易理解和开始使用的方法之一。

对于您的情况，您可能会使用https://github.com/caolan/async#eachseriesarr-iterator-callback

代替 for 循环，使用以下代码片段：

async.eachSeries(items, function( item, callback) {
            //Is the item we're looking at in need of approval?
            if (item.get_item("Approved") === false)
            {
                //Yes, prompt for approval.     
                //$('#approvalModal').modal('show'); //modals don't seem to work in loops.
                confirm("here's something in need of approval.", callback);
            }
            else
            {
                //No, do nothing.
                alert("skip it, it doesn't need approved.");
            }
});

此外，您还需要让您的函数在模态关闭后confirm调用该函数，因此将为您打开下一个模态（这就是我在调用中添加回调的原因）。callbackasyncconfirm

于 2014-06-18T19:52:50.060 回答
0

我最终使用了递归函数而不是 for 循环。

需要注意的重要一点是，当从模式（在本例中为Bootbox对话框）收到回复时，将运行一个回调函数，该函数再次调用递归函数，索引加一。这样，递归函数一直运行，直到遍历完列表中的所有项目，每次都等待响应，并且表现得像一个异步 for 循环。

这是它的样子，以防它帮助有类似问题的人。这里有一些额外的东西供我提示，但我决定将所有内容留在上下文中。

//Recursive function that behaves like a for loop, stepping through all items and finding ones needing approval.
        function recursiveCheckRequests(i) {
            var item = items.getItemAtIndex(i);

            //Is the item we're looking at in need of approval?
            if (item.get_item("_ModerationStatus") === 2) {
                //Yes, prompt for approval. (code for prompt goes here.)

                //Fetch info about the request to be displayed in the dialog box.

                var title = item.get_item('Title');
                var location = item.get_item('Location');
                var description = item.get_item('Description');
                var requester = item.get_item('Requester').get_lookupValue();
                var start = item.get_item('EventDate').toString("h:mm tt, dddd, MMMM d, yyyy"); //formatting the datetime
                var end = item.get_item('EndDate').toString("h:mm tt, dddd, MMMM d, yyyy"); //formatting the datetime

                //Generate a nicely formatted message using this crazy-looking string of HTML
                var html="<p>We've found a pending request from a person you manage.</p>"
                html +="<p>Would you like to approve this request? </p>"
                html +="<br/>"              
                html +="<div class=\"form-horizontal\"><!-- Start of form !-->"
                html +="    <div class=\"form-group\">"
                html +="        <label class=\"col-sm-4 control-label\">Requester</label>"
                html +="        <div class=\"col-sm-7\">"
                html +="            <p style=\"text-align:left\" class=\"form-control-static\">" + requester + "</p>"
                html +="        </div>"
                html +="    </div>"
                html +="    <div class=\"form-group\">"
                html +="        <label class=\"col-sm-4 control-label\">Title</label>"
                html +="        <div class=\"col-sm-7\">"
                html +="            <p type=\"text-align:left\" class=\"form-control-static\">" + title + "</p>"
                html +="        </div>"
                html +="    </div>" 
                html +="    <div class=\"form-group\">"
                html +="        <label class=\"col-sm-4 control-label\">Location</label>"
                html +="        <div class=\"col-sm-7\">"
                html +="            <p type=\"text-align:left\" class=\"form-control-static\">" + location + "</p>"
                html +="        </div>"
                html +="    </div>"     
                html +="    <div class=\"form-group\">"
                html +="        <label class=\"col-sm-4 control-label\">Start</label>"
                html +="        <div class=\"col-sm-7\">"
                html +="            <p type=\"text-align:left\" class=\"form-control-static\">" + start + "</p>"
                html +="        </div>"
                html +="    </div>"     
                html +="    <div class=\"form-group\">"
                html +="        <label class=\"col-sm-4 control-label\">End</label>"
                html +="        <div class=\"col-sm-7\">"
                html +="            <p type=\"text-align:left\" class=\"form-control-static\">" + end + "</p>"
                html +="        </div>"
                html +="    </div>"
                html +="    <div class=\"form-group\">"
                html +="        <label class=\"col-sm-4 control-label\">Description</label>"
                html +="        <div class=\"col-sm-7\">"
                html +="            <p type=\"text-align:left\" class=\"form-control-static\">" + description + "</p>"
                html +="        </div>"
                html +="    </div>"
                html +="</div> <!-- End of Form !-->"

                bootbox.dialog({
                  message: html,                    
                  title: "A pending request needs your verdict!",
                  buttons: {
                    approve: {
                      label: "Approve",
                      className: "btn-success",
                      callback: function() {

                        //Set it to approved.   
                        item.set_item("_ModerationStatus", 0);
                        item.update();

                        currentContext.load(item);
                        currentContext.executeQueryAsync(
                            function(){
                                        bootbox.dialog({
                                            title: "Request Approved.",
                                            message: "This request has been approved.",
                                            buttons: {
                                                sucess:{
                                                    label: "Ok",
                                                    callback: callback
                                                }
                                            }       
                                        });
                                }, 
                            function(sender, args){
                                        bootbox.dialog({
                                            title: "Something went wrong!",
                                            message: "We failed to approve the request! Here's what we know about the problem: " + args.get_message() + '\n' + args.get_stackTrace(),
                                            buttons: {
                                                sucess:{
                                                    label: "Ok",
                                                    callback: callback
                                                }
                                            }       
                                        });
                            });

                            function callback(){
                            //Go on to next in list when we've received a reponse.
                            if (i + 1 < items.get_count()) {
                               recursiveCheckRequests(i + 1);
                            }
                            }
                      }
                    },
                    reject: {
                      label: "Reject",
                      className: "btn-danger",
                      callback: function() {

                        //Set it to rejected.
                        item.set_item("_ModerationStatus", 1);
                        item.update();

                        currentContext.load(item);
                        currentContext.executeQueryAsync(
                            function(){
                                        bootbox.dialog({
                                            title: "Request Rejected.",
                                            message: "This request has been rejected.",
                                            buttons: {
                                                sucess:{
                                                    label: "Ok",
                                                    callback: callback
                                                }
                                            }       
                                        });
                                }, 
                            function(sender, args){                     
                                        bootbox.dialog({
                                            title: "Something went wrong!",
                                            message: "We failed to reject the request! Here's what we know about the problem: " + args.get_message() + '\n' + args.get_stackTrace(),
                                            buttons: {
                                                sucess:{
                                                    label: "Ok",
                                                    callback: callback
                                                }
                                            }       
                                        });
                                });         


                            function callback(){
                            //Go on to next in list when we've received a reponse.
                            if (i + 1 < items.get_count()) {
                               recursiveCheckRequests(i + 1);
                            }       
                            }
                      }
                    },
                    Main: {
                      label: "Skip",
                      className: "btn-default",
                      callback: function() {
                        //Leave it as pending, which is equivalent to the line below
                        //item.set_item("_ModerationStatus", 2);

                            //Go on to next in list since we don't require a reponse.
                            if (i + 1 < items.get_count()) {
                               recursiveCheckRequests(i + 1);
                            }   
                      }
                    }
                  }
                });
            }
            else
            {
                //bootbox.alert("This request isn't pending.");

                //Go on to next in list since this one doesn't need a response.
                if (i + 1 < items.get_count()) {
                   recursiveCheckRequests(i + 1);
                }
            }


        }
        //Start the recursive function seen above.
        recursiveCheckRequests(0);
于 2014-06-24T18:44:18.447 回答