Showing multiple AngularJS routes at once - javascript

I have built an AngularJS single page app to display reports. There is a select box for the user to select a report from dozens of reports and that report loads in the ui-view using Angular's UI-Router. If they selected the Big Report, the url is something like myapp.com/#/reports/big-report.
I would like to build a print function that would allow them to select multiple reports from a list and print off just those reports all together. I was thinking about loading them into a hidden div with print styles to show them when printing. That seems to work fine for a single report, but I'm not sure how to load multiple.
How would you load multiple "routes" or reports at once into hidden divs? Trying to think of a way to create a dynamic number of hidden ui-views, but I'm not sure that's correct. Maybe iframes loading each report route in it, but that seems dirty. Any ideas?

perhaps you could create a new route that will get each ID (if these reports contain an ID) and render it in the view.
the url would be something like myapp.com/#/reports/more/1,4,6,8 or any other formatting.
And then you can use AngularJS $routeParams to get the reports ID and finally in the view load each of these reports.

Related

Is there an event similar to dataSelected for the filter panel in power bi reports?

I'm embedding reports into an angular app using power bi's javascript api, and it would be useful to be able to send information about the filter pane from the report to the app.
The objective is to select a filter from the filter pane and send to the app what's the category of the chosen filter and what value was selected (for example an user picks "Porto" from the City filter and the app is able to console.log the words "Porto was selected from City").
Is there any function from the javascript api that does this? If not then what's a good idea to implement this?
When a filter is applied, the report will be rendered again and rendered event will be called:
rendered - Called when a report is fully rendered. For example, if all visuals are rendered on loading report or after user interaction.
You can handle this event and get information about report, page and visual level filters applied.

Solution to raise the amount of products( quotedetails or quoteproducts) in Quote entity via modal

I want to add a Button in the ribbon of Quote,
When the user clicks on that, A modal displays, with two fields.
One is quote product categories that exist in that quote, that means it searches in quote product of the quote and find all the categories exist in that specific quote and then display them in a combo box. with their guid or something like that.
Another field is a textbox, which is percentage.
something like .
The end-user clicks on the ribbon button, the modal appears, he/she gives a number to the percentage and select one of the categories; when presses apply button, it find and return all amounts of the quote products in that quote that matches the user selected category, compute some amount based on quote total amount and the returned amounts and and insert that computed number into a field in each quote product named overed_amount.
How can I handle this? JS or Plugin?
I prefer to this via JS rather than writing plugin, But can I pass parameters between this HTML or JS file to CRM Form/Forms?
And does anybody have any sample? like this? any suggestion?
I googled and most of Plugins are about writing simple plugin based on existing code.
Can I display modal via plugin? Any suggestion or advise? or sample?
Plugins (and custom workflow assemblies) run as part of the backend platform. The only "UI" component they have is they run synchronously and throws an Exception, a popup will show that Exception to the user.
The typical way to add custom UI components is via custom web resources.
In custom web resources you can do HTML / JS / CSS, and even leverage 3rd party libraries such as KendoUI. You can add them to the form or open them via a ribbon button.
A custom web resource can typically interact with the main Dynamics 365 form via the parent property (as the above linked article describes).
One library that can help with displaying custom web resources in D365 is Alert.js, though as the documentation says, it's unsupported.
If you want to include some backend operations as part of the custom UI, you can create custom actions and call them from the custom web resource's JavaScript.

angular 4 maintain different copy of common filters for each page

my angular application consist of some common custom filters with different report pages.
User Can navigate from one page to another page and he can change filter for each page.
Need to add feature so common filters would maintain for each page.Whenuser navigated back to previous page it should display same filters that user selected in previous page.
For Above use case is it right to use ng-redux else how i can achieve this in angular 4
Please suggest best approach.
I assume by navigating from one page to another, you are basically routing to different routes. Therefore to have the information of your selected filter for each page, you can add that information to the routing parameter.
Something like this:
this.router.navigate(['/your_route_name',{parameterName: parameterValue}]);
And on the routed component, it can be received as such:
this.route.snapshot.paramMap.get('parameterName')
Or else you can have a service running globally between your routes, which is not recommended as it populates the global space unnecessarily.

How do I create select menu in an external file and embed it in html to show the menu

My website has individual pages for members, but I have a select menu used to scroll from one member to the other. I have the select menu coded in the html on every page, but I need a better solution since my membership is growing.
I need to be able to create that same select menu in a separate file with the ability, when selected to jump to another member page, have that embedded in the body where I need it so that all I have to do is alter/ update the external file and it'll be done for all the member pages.
I've looked into javascripting it, mysqling it, but can't find (looking on youtube) a code to exactly help me in what I need.
My typical code for the select
//(select.....
//(option value="http:www.website-Profile-blahblah.html.... so on and so forth.
I need to pull this from an external file to use across the board and place it in the body where I need it.
thanks for any help you can offer.
In general this sounds like something you should be using a back end rendering engine for. As far as the select goes, this would be a great place to use a dropdown menu such as the one provided by bootstrap since clicking a select won't actually move you to another page.
If you dont want to use/can't use a back end rendering engine to render the options, I would suggest looking at angular.js which has a great ng-repeat and ng-option feature that would allow you to dynamically build the select/dropdown with as many users as you want.
angular ng-repeat page: https://docs.angularjs.org/api/ng/directive/ngRepeat
bootstrap dropdown: http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp (note the a tags could go directly to the user's page)
From experience in cases like this, it is much easier to have an SQL table to store the links you would like to use. The next thing to do is to have your back-end send you the list of links. With this, you can dynamically create the option tag and append it to your select tag. functions like newOptionTag.setAttribute('value', 'url'),document.createElement('option') and selectElement.appendChild(newOptionTag) should help you on your way
If you really want to use a seperate file, you could store the membernames and links in a json file. On document load get the file, parse it, then use the object to build the options.
The w3schools website (though frowned upon by some) has a json tutorial and an example that is already halfway there.
EDIT: I see it actually uses mysql to build the json file...

Advice on structuring and rendering different objects within the same view

I'm building an application and I'm looking for some advice on how to structure a specific piece of functionality I'm working on.
I have this reports view, on this page a drop down with various reports a user can generate. This is what it looks like:
The drop down is just an array I hard coded in the controller. When a user selects a specific report, the controller makes a call to the ReportFactory and returns the selected report object, from there the view builds the report using the returned object.
However, this doesn't work with multiple reports since the html table is completely different depending on the report I need and as of now I've hard coded the report table into the view.
What would be the best way to switch between different reports which would each have their own function to build the object, their own html to render the table and where I can still implement DataTables to all of them once I get to that step.
You could possibly use a named ui-view with ui-router, then each dropdown would be a state which can load a different templateURL and controller.

Categories

Resources