Modify Loading Messages

9 posts, 1 answers
  1. Colin
    Colin avatar
    2 posts
    Member since:
    Apr 2018

    Posted 25 Feb 2019 Link to this post

    Is it possible to modify the loading message on a report? ("0 pages loaded so far...") I have two issues:

     

    1) By default it loads with orange text/background regardless of the white labeling done in the configuration menu.

    2) Some of our reports load slowly, and different text would be helpful to inform the user of such.

  2. Answer
    Neli
    Admin
    Neli avatar
    277 posts

    Posted 28 Feb 2019 Link to this post

    Hi Colin,

    If I understood correctly, the requirement is to customize the messages of the Html5 Viewer in the Report Server Manager. This can be done with some minor modifications of the Preview.cshtml View file that could be found in the folder (Telerik Report Server installation folder)\Telerik.ReportServer.Web\Views\Report (for example C:\Program Files (x86)\Progress\Telerik Report Server\Telerik.ReportServer.Web\Views\Report).
    To be able to change some of the loading messages, please, add a new JS file (for example called resources.js). It should contain the following of code:

    (function (trv, $) {
        "use strict";
        var sr = {
            //warning and error string resources
            loadingReport: 'Loading report... Custom',
            loadingReportPagesInProgress: 'Custom Loading Message {0} pages loaded so far...',
            loadedReportPagesComplete: 'Done. Total {0} pages loaded.',
            noPageToDisplay: "No page to display."
        };
        trv.sr = $.extend(trv.sr, sr);
    }(window.telerikReportViewer = window.telerikReportViewer || {}, jQuery));

    Then, please, add a reference in the file that contains the Html5 Viewer (or another web page).

    <script src="PathToTheFile/resources.js"></script>

    Please, check the Localization article that gives the full list with the messages and properties which can be customized. You can see also the attached muted video that demonstrates the above approach. The video can be opened via any web browser with installed Flash plug-in.

    About: 1) By default it loads with orange text/background regardless of the white labeling done in the configuration menu.

    If you would like to change the background color of the dialog window, please add the following piece of code in the file that contains the Html5 Viewer, i.e. Preview.cshtml (or another web page).

    .k-widget.k-tooltip-validation {
             border-color: red;
             background-color: red;
             color: #000;
         }

    This will override the default colors (in red in the example above).
    In the attached Demo file you can also find a demo project which demonstrates the previously explained approaches. The solution is built against Telerik Reporting version 13.0.19.222. Please, Build the Solution first.

    I hope the proposed approach would work for you.
    Let me know if you need any additional help.

    Regards,
    Neli
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

  3. Colin
    Colin avatar
    2 posts
    Member since:
    Apr 2018

    Posted 28 Feb 2019 in reply to Neli Link to this post

    Thanks, Neli. This was extremely helpful!
  4. Neli
    Admin
    Neli avatar
    277 posts

    Posted 04 Mar 2019 Link to this post

    Hello Colin,

    I am really glad that the issue was solved.
    Please, let me know if you have any additional questions.

    Regards,
    Neli
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Joel
    Joel avatar
    4 posts
    Member since:
    Aug 2019

    Posted 02 Aug 2019 in reply to Neli Link to this post

    Hi Neli, 

    Your examples above are perfect for modifying a stand-alone Telerik Report Server, thank you. But can you also help us understand how to achieve the same modifications for a .NET Core Angular stack using the Telerik Angular Report Viewer node.js module? 

    We're able to change the css colors of the loading messages by modifying the tooltip style in the index.html. But we're not able to modify the loading text messages unless we edit the telerikReportViewer.js file directly in the node.js module. Which we don't want to rely on since we can't modify node.js pulls in our production branch. We've tried using templateURL settings to point to a local custom telerikRepoerViewerTemplate-sass.html as well as added a telerik_resources.js file as you wrote above being pointed to from the index.html but it still doesn't change the text as desired. We can change the colors, but not the text yet. 

    Thank you,

    Joel

  6. Neli
    Admin
    Neli avatar
    277 posts

    Posted 07 Aug 2019 Link to this post

    Hello Joel,

    To localize the messages displayed by the Angular Report Viewer, you need to create a new TypeScript file stringResources.ts which will contain the localized strings. Then it has to be imported in the component where the viewer is used. These and all required steps can be found at Localization article for Angular Report Viewer.

    Regards,
    Neli
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Joel
    Joel avatar
    4 posts
    Member since:
    Aug 2019

    Posted 25 Feb in reply to Neli Link to this post

    Hi Neli, 

    We couldn't make the above steps work for us and have been trying again recently. Every effort so far returns an "undefined" state for the viewer object including in the ngAfterViewInit method. We're currently using @progress/telerik-angular-report-viewer@9.20.219 with Angular/core 8.2.14 using default Kendo UI SASS. And will upgrade to Angular 9 soon. I've also followed this article to the best of my abilities, adding the #viewer1 to the tr-viewer tag. Any advice will be appreciated. 

     

    https://docs.telerik.com/reporting/angular-report-how-to-use-with-angular-cli

     

     

  8. Joel
    Joel avatar
    4 posts
    Member since:
    Aug 2019

    Posted 25 Feb in reply to Neli Link to this post

    I think I may be onto something. It works if I use AfterViewChecked instead (which is a mess). Looks like its due to our use of a container-fluid to dynamically set the tr-viewer parameters:

    <div class="container-fluid" *ngIf="report_model && category_model">
        <app-page-header [title]="report_model.Name"></app-page-header>

        <tr-viewer #viewer1 [containerStyle]="viewerContainerStyle"
        [authenticationToken]="reports_token_model.access_token"
        [reportServer]="{
            url: reports_token_model.report_server
        }" [reportSource]="{
            report: category_model.Name+'/'+report_model.Name,
            parameters: {
                CultureID: 'en',
                PropertyId: session.current_property?.id,
                CurrentUserId: session.user_id
            }
        }" [viewMode]="'INTERACTIVE'" [scaleMode]="'FIT_PAGE_WIDTH'" [scale]="1.0">
        </tr-viewer>

  9. Joel
    Joel avatar
    4 posts
    Member since:
    Aug 2019

    Posted 25 Feb in reply to Joel Link to this post

    Figured it out. Added a trigger method to assign the viewerObject as the tr-viewer tries to load. First call returns the viewer as undefined, all others work perfectly. Removes need to trying to manually time it with Angular lifecyle hooks. 

     

    HTML:

    <div class="container-fluid" *ngIf="report_model && category_model">
        <app-page-header [title]="report_model.Name"></app-page-header>

        {{ localization() }} // trigger event to change viewer.viewerObject.stringResources

        <tr-viewer #viewer1 [containerStyle]="viewerContainerStyle"
        [authenticationToken]="reports_token_model.access_token"

     

    Typescript:

        localization() {
            //console.log(this.viewer)
            if (this.viewer)
            {
                const language = navigator.language;
                var resources = (language === "ja-JP") ? loadingStatus.japanese :loadingStatus.english;
                this.viewer.viewerObject.stringResources = Object.assign(this.viewer.viewerObject.stringResources, resources);
            }
        }

    Moved the StringResources language sets into a local export class called loadingStatus in the component.ts.

    export class loadingStatus {
        // override string messages for other languages here, each language set must have same messages modified
        static english = {
            loadingReport: "Loading while the satellite moves into position",
            loadingReportPagesInProgress: "Loading... at least you're not on hold",
            loadedReportPagesComplete: "Crushed it! {0} pages loaded.",
        }
        static japanese = {
            loadingReport: 'ちょっと、まってください...',
            loadingReportPagesInProgress: "読み込み中...少なくとも保留になっていません",
            loadedReportPagesComplete: "潰した! {0}ページが読み込まれました。",
        }
    }

Back to Top