I'm currently using Office-UI-Fabric-JS to build a UI for an Outlook Web Add-In. I will eventually switch over to React.
I've gone over the examples and what I'm not clear about is from where will the HTML for the Dialog box reside?
Calling the Fabric Dialog's "open" API from a TaskPane centers the Dialog within the TaskPane. I would like it centered on the screen.
However, I'm not sure where the HTML for the dialog should go?
Do I put it in the non-UI Html file ("FunctionFile.html"), then use div tags?
Do I create an entirely separate HTML page, then load that HTML using Javascript (window.location = "mydialog.html")?
HERE'S A SAMPLE (Where would this HTML go?)
<div class="docs-DialogExample-default">
<div class="ms-Dialog">
<div class="ms-Dialog-title">All emails together</div>
<div class="ms-Dialog-content">
<p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
<div class="ms-CheckBox">
<input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
<label role="checkbox" ...>
<span class="ms-Label">Option1</span>
</label>
</div>
<div class="ms-CheckBox">
<input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
<label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria- checked="false" name="checkboxa">
<span class="ms-Label">Option2</span>
</label>
</div>
</div>
<div class="ms-Dialog-actions">
<button class="ms-Button ms-Dialog-action ms-Button--primary">
<span class="ms-Button-label">Save</span>
</button>
<button class="ms-Button ms-Dialog-action">
<span class="ms-Button-label">Cancel</span>
</button>
</div>
</div>
<button class="ms-Button docs-DialogExample-button">Open Dialog</button>
<label class="docs-DialogExample-label"></label>
</div>
To open a dialog from web addin use the displayDialogAsync API provided by Office.js. Some additional documentation can be found here:
https://learn.microsoft.com/en-us/office/dev/add-ins/develop/dialog-api-in-office-add-ins
Related
I currently have the following html which consists of 3 buttons (1 hidden). I have a button which triggers a hidden button which is used to select a file to upload and I have a third button which is used to call upload and send the data to the server. I would like to change this so that after selecting a file, the file is automatically uploaded. I am having issues triggering the upload button when a file is selected (and then I will hide the upload button once I have the automatic upload functionality working). I have tried using the onchange event to accomplish this but with no success
<div class="col-xs-12" style="margin-top:250px">
<div class="col-xs-4" align="center" style="padding-left:290px">
<button class="btn btn-default" ng-click="newProject()">New Project</button>
</div>
<form class="col-xs-4" align="center"
ng-controller="CsvImportController" style="display: inline-block;padding-left:200px" id="csvForm">
<a href="#" class="btn btn-default btn-file"
onclick="document.getElementById('fileBrowser').click(); return false;">Select
CSV File</a>
<button id="submitCsv" class="btn btn-default" ng-click="upload()">Upload</button>
</form>
<div class="col-xs-4" align="center" style="padding-left:110px">
<a class="btn btn-default">Browse
Projects</a>
</div>
</div>
<br>
<br>
<input id="fileBrowser" style="visibility: hidden;"
class="btn btn-default btn-file" type="file" id="file" file-input="files" onchange="document.getElementById('submitCsv').click(); return false;"/>
See this answer for some libraries that will handle all the upload functionality for you as well as provide some other nice features.
onchange will not work on <input type="file"/> as it will not register a change when you select a file. ng-click will not work also as it will trigger when the input is first clicked, not when a file is selected.
You also can't apply any styles to an <input type="file" /> either, so I get what you're trying to do here, but <input type="file" /> does not offer much functionality which is really unfortunate.
You also have 2 ids defined on your hidden input. Make sure there is only one id so that you can call it correctly.
Basically i would like for one dive to be hidden when someone adds text to a box.
I have a form where someone can either upload an image or add a link to an image. When the user adds an image link i would like to hide the upload button
Right now i have it that when they select an image to upload the text box will be hidden but i cant get the vice versa working.
Id like to hide the div "manual-upload" when a user adds text to the data-ng-model="dealsCTRL.urlimage"
<div class="manual-upload">
<div class="text-center form-group controls" ng-hide="uploaderProduct.queue.length">
<span class="btn btn-default btn-file">
Select Image <input type="file" nv-file-select uploader="uploaderProduct">
</span>
</div>
<div class="sub-label"> Upload an image of product.</div></br>
<div class="text-center form-group" ng-show="uploaderProduct.queue.length">
<button class="btn btn-primary" ng-click="uploadProductPicture();">Upload</button>
<button class="btn btn-default" ng-click="cancelProductUpload();">Delete</button>
</div>
<div ng-show="success" class="text-center text-success">
<strong>Upload Successful</strong>
</div>
<div ng-show="error" class="text-center text-danger">
<strong ng-bind="error"></strong>
</div>
</div>
<div class="add-image-link">
<label class="control-label" for="urlimage" ng-hide="uploaderProduct.queue.length">IMAGE URL</label>
<div class="controls" ng-hide="uploaderProduct.queue.length">
<input type="url" data-ng-model="dealsCTRL.urlimage" id="urlimage" class="form-control"
placeholder="Image URL" ng-change="blankPhoto()" required>
<div class="sub-label">Manually enter an image URL.</div>
</div>
</div>
You want to hide the element when you start typing so
div class="manual-upload" ng-hide="dealsCTRL.urlimage.length > 0"
Please try the following:
<div class="manual-upload" ng-show="dealsCTRL.urlimage.length === 0">
Can anyone please suggest me How to implement a POP UP function in Angular + Node js?
I want to implement a login which should pop up when the user clicks login button.
Thanks
Depends on what CSS framework you are using. I often use Bootstrap, and the ui-bootstrap directives. This allows easy modal dialog display.
This is dummy html with bootstrap content that will trigger pop up on button click. You will notice I've placed ng-click directive on the login button, so you should just create angular function on your controller that is combined with this view.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modalExample">Login modal</button>
<div class="modal fade modalExample" tabindex="-1" role="dialog" aria-labelledby="myModallable">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form>
<div class="form-group">
<input type="email" class="form-control" ng-model="username" placeholder="Username" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" ng-model="password" />
</div>
<div class="form-group">
<button class="btn btn-default" ng-click="login(username,password)">Login</button>
</div>
</form>
</div>
</div>
</div>
This will handle your problem on the client side, and related to Node.js I suppose you will have some api controller that will listen for the request that you can send from angular factory that represents service.
Several ways of doing this either with jQuery or angular.js.
ngDialog plugin is available you can go through it if you want popup with pure angular.
I am creating a page with conference speaker information and would like to have his picture below the main tool bar then have profile, rating and contact information below the picture in tabs format so as not to have long pages on the mobile app.
The examples have seen so far only place the tabs top or bottom which is not always the only way to use them in real life applications.
How would I implement this in a clean way if there's one already provided by the framework?
Instead of using the <ons-tabbar> custom element you can use just the CSS.
The CSS is available at:
http://components.onsen.io/
<div class="my-tab-bar tab-bar">
<label class="tab-bar__item">
<input type="radio" name="tab-bar-a" checked="checked">
<button class="tab-bar__button">
<i class="tab-bar__icon ion-stop"></i>
<div class="tab-bar__label">One</div>
</button>
</label>
<label class="tab-bar__item">
<input type="radio" name="tab-bar-a">
<button class="tab-bar__button">
<i class="tab-bar__icon ion-record"></i>
<div class="tab-bar__label">Two</div>
</button>
</label>
<label class="tab-bar__item">
<input type="radio" name="tab-bar-a">
<button class="tab-bar__button">
<i class="tab-bar__icon ion-star"></i>
<div class="tab-bar__label">Three</div>
</button>
</label>
</div>
But this is positioned in the top so you will have to override the CSS:
.my-tab-bar {
position: initial;
}
http://codepen.io/argelius/pen/dPEpbV
My application uses the Angular file upload component.
https://github.com/danialfarid/angular-file-upload
It previously worked but I seem to have broken it during refactoring, and am not sure how to fix it.
The application allows for selection of the spreadsheet, but when the Import button is pressed it just highlights but does not do anything. The onFileSelect function executes, but the submitUpload is never called. There is nothing in the debugger or console.
There is a partial which contain the spreadsheet upload component.
<div class="row">
<div class="col-md-8">
<form name="uploadForm" reset-form="resetForm" ng-submit="selector.submitUpload()" ng-controller="DesignViewCtrl" enctype="multipart/form-data">
<input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
</div>
<div class="col-md-2">
<input type="submit" value=" Import " class="btn btn-success" />
<p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
</form>
</div>
</div>
The relevant code in the controller:
$scope.onFileSelect = function ($files) {
return $scope.selector.file = $files[0];
};
$scope.selector.submitUpload = function () {
console.log('submit upload2');
return $scope.upload = $upload.upload({
url: '/api/batches/spreadsheet_upload.json',
file: $scope.selector.file
}).success(function (data, status, headers, config) {
console.log(JSON.stringify(data.data[0],null,' '))
$scope.selector.tabledata.push(data.data[0]);
});
};
I think the problem is a result of you having your column divs splitting the form, which results in your DesignViewCtrl not being a parent of the submit input. Try the following change in your template:
<div class="row">
<form name="uploadForm" reset-form="resetForm" ng-submit="selector.submitUpload()" ng-controller="DesignViewCtrl" enctype="multipart/form-data">
<div class="col-md-8">
<input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
</div>
<div class="col-md-2">
<input type="submit" value=" Import " class="btn btn-success" />
<p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
</div>
</form>
</div>
This change ensures your form element is the parent of both column divs.
Based on the documentation for angular-file-upload you don't even need to use a <form> so it seems like the library does that part for you. Try removing the form and just use a <div> for the controller, then use a <button> instead of an <input type="button"> for the Import button.
What I suspect is happening is that the ng-submit event is not being invoked when you click on your "Input button". I've experienced weird issues similar to this when using a form in angularjs and trying to rely on the form submit behavior.
Actually I just looked at it again and I think the problem really is that you have the <form> tag split over two elements (which would not be correct). If you had that rendered within the browser without a partial then it may work but I suspect that having it within the partial like and relying on AngularJS to put it in the browser won't work reliably.
So you can try one of two things:
1) Remove the form tag completely
<div class="row" ng-controller="DesignViewCtrl">
<div class="col-md-8">
<input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
</div>
<div class="col-md-2">
<button class="btn btn-success" ng-click="selector.submitUpload()"> Import </button>
<p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
</div>
</div>
2) Leave the form tag but make sure the syntax is valid:
<form name="uploadForm" reset-form="resetForm" ng-submit="selector.submitUpload()" ng-controller="DesignViewCtrl" enctype="multipart/form-data">
<div class="row">
<div class="col-md-8">
<input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
</div>
<div class="col-md-2">
<input type="submit" value=" Import " class="btn btn-success" />
<p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
</div>
</div>
</form>