1. Home
  2. Forum
  3. Angular
  4. Change report by changing service Url

Change report by changing service Url

I have a pdf viewer, i need to change the report it is viewing by a change to the service Url.

<ej-pdfviewer style="width:100%;min-height:600px;display:block" [(serviceUrl)]="reportUrl" ></ej-pdfviewer>
If reportUrl is changed in the typescript, the report doesn't refresh, is there a way to do this.



7 Replies
MS Mohan Selvaraj Syncfusion Team October 11, 2017 01:19 PM UTC

Hi Mike, 

Thank you for contacting Syncfusion products. 

We can change the PDF document on initial loading in PDF viewer control by using the property “DocumentPath”. Kindly refer the below code snippet for your reference. The Service URL is used to process the PDF document which is loaded into the PDF viewer control in server side (Web service method). If we change the Service URL means, then it should contain the Web API methods to process the loaded PDF document and the PDF document also available in the mentioned location.  

HTML 

<ej-pdfviewer [(serviceUrl)]="service" id="pdfviewer1"  [(documentPath)]="docPath" style="width:100%;min-height:600px;display:block" > </ej-pdfviewer> 

TS 
export class AppComponent { 
  service: string; 
  docPath: string; 
    constructor() { 
        this.service = 'http://js.syncfusion.com/demos/ejServices/api/PdfViewer'; 
        this.docPath = 'F# Succinctly'; //The document which has been available in our online hosted service. 
    } 
} 

We have also provided the sample for loading the PDF document in PDF viewer control, kindly download the sample from the below link. 


NOTE: The PDF document has been loaded from our online hosted service. The PDF document which has been available in the server can be loaded, However you can create your own web services by using the webAPI controller methods, kindly refer the UGdocumentation link for the code snippet. 

Since you are using the ”DocumentPath” property. kindly use this below code snippet for Load method in Web API controller.  

public object Load(Dictionary<string, string> jsonResult) 
        { 
            //load the multiple document from client side  
            if (jsonResult.ContainsKey("newFileName")) 
            { 
                var name = jsonResult["newFileName"]; 
                var pdfName = name.ToString() + ".pdf"; 
                if (jsonResult.ContainsKey("password")) 
                { 
                    helper.Load(HttpContext.Current.Server.MapPath("~/App_Data/PdfViewer/" + pdfName), jsonResult["password"]); 
                } 
                else 
                { 
                    helper.Load(HttpContext.Current.Server.MapPath("~/App_Data/PdfViewer/" + pdfName)); 
                } 
            } 
            else 
            { 
                if (jsonResult.ContainsKey("isInitialLoading")) 
                { 
                    if (jsonResult.ContainsKey("file")) 
                    { 
                        var name = jsonResult["file"]; 
                        helper.Load(name); 
                        } 
                    else 
                    { 
                        helper.Load(HttpContext.Current.Server.MapPath("~/App_Data/PdfViewer/HTTP Succinctly.pdf")); 
                    } 
                } 
            } 
            string output = JsonConvert.SerializeObject(helper.ProcessPdf(jsonResult)); 
            return output; 
        } 

If the provided sample is different from your requirement, kindly provide us more specific details that illustrates your exact requirement. It will be helpful for us to analyze more on your requirement and could provide you the better solution.   

Regards, 
Mohan S 


MR Mike Rosenberger October 11, 2017 03:25 PM UTC

I do not have an issue loading when the page initializes, but after action is taken on the page and the report needs to change (url changes), it won't try to get the new report. 


MS Mohan Selvaraj Syncfusion Team October 12, 2017 12:34 PM UTC

Hi Mike, 
 
Thank you for your update. 
 
In your previous update you have mentioned URL changes not reflected in the viewer. Can you please provide the details to us that the URL changes refers to the ServiceUrl (The Service URL is used to process the PDF document which is loaded into the PDF viewer control in server side Web method) or document path URL (Path for loading the PDF documents into the PDF viewer). It will be helpful for us to analyze more on your requirement and could provide you the better solution.   
 
Note: If we need to change the PDF document after rendering, we can use load() API method to load a new PDF document into the PDF viewer control. 
                              
Regards, 
Mohan S 


MR Mike Rosenberger October 12, 2017 05:26 PM UTC

So it basically works like this, the api url is something like localhost/api/report/{id:int} so depending on what report is being requested i am want to change the reportUrl to the new report id. 

If that is changed in the .ts file to the new id it does not make a new api call to get the new report.


MS Mohan Selvaraj Syncfusion Team October 13, 2017 12:42 PM UTC

Hi Mike, 
 
Thank you for your update. 
 
We can pass the ID to Web API controller action method by modifying the route template in the Global.asax.cs file like below provided code snippet of Web API controller service.  
 
Web API controller service: 
 
 
protected void Application_Start(object sender, EventArgs e) 
        { 
            System.Web.Http.GlobalConfiguration.Configuration.Routes.MapHttpRoute( 
            name: "DefaultApi", 
            routeTemplate: "api/{controller}/{id}/{action}", 
            defaults: new { id = RouteParameter.Optional }); 
 
            AppDomain.CurrentDomain.SetData("SQLServerCompactEditionUnderWebHosting", true); 
        } 
 
 
 
 
 
 
 
 
 
 
 
 
  
  
  
Then we can pass the id in Typescript file, Kindly refer the below code snippet. 
 
Typescript: 
export class AppComponent { 
  service: string; 
    constructor() { 
        this.service = 'http://localhost:57968/api/PdfViewer/10';  //where 10 denotes the id. 
    } 
} 
 
 
In the controller side we can access the id using below code snippet. 
 
Web API Controller: 
 
public object Load(int id,Dictionary<string, string> jsonResult) 
        { 
} 
//where id will retrieve the value 10 which we have passed in the TS file 
 
 
We have created the sample to pass the id from TS file to the Web API controller and  Web API controller service, Kindly download the sample and Web API controller service from the below link. 
 
 
 
Note: First run the Web API controller service sample and then set the URL of the Web API controller in the serviceUrl property of the PDF viewer control in Typescript file.  
 
If the provided sample is different from your requirement, kindly provide us more specific details that illustrates your exact requirement. It will be helpful for us to analyze more on your requirement and could provide you the better solution.    
 
Regards, 
Mohan S 


MR Mike Rosenberger October 13, 2017 01:07 PM UTC

I think we have a disconnect on what is trying to be accomplished, here is the psuedo code we are using. And the report is displaying fine when the url is set in the onInit().  We just need it to change when we change it in the .ts file.


c# WEbApi:

 [Route("{setId}/Load")]

        public object Load(int setId, Dictionary<string, string> jsonResult)

        {

            return this.LoadConcreteReport(setId, jsonResult);

        }


.ts

export class ConcreteReviewComponent implements OnInit {

reportUrl: string;


ngOnInit() {

this.reportUrl = "api/concrete/1";

  }


changeReport(){

this.reportUrl = "api/concrete/2";

}

}

html:

<button class="btn btn-primary" (click)="changeReport()" [disabled]="nextButtonDisabled">Next Report</button>
<ej-pdfviewer style="width:100%;min-height:600px;display:block" [(serviceUrl)]="reportUrl" ></ej-pdfviewer>



MS Mohan Selvaraj Syncfusion Team October 16, 2017 12:57 PM UTC

Hi Mike, 
 
Thank you for your update. 
 
We can change the PDF document in the PDF viewer control by using the load API. We can also change the serviceUrl by accessing the model of the PDF viewer control in the ts file. 
 
Regards, 
Mohan S 


Loader.
Up arrow icon