cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Need to share some code when posting a question or reply? Make sure to use the "Insert code sample" menu option. Learn more! X

Pdf attachment in studios with toggle buttons

nraichura
12-Amethyst

Pdf attachment in studios with toggle buttons

Hii all

I want to add link to the toggle button so that it can directly jump to the pdf while pressing the button.

Let me know any suitable options
Thank you
1 ACCEPTED SOLUTION

Accepted Solutions

OK , this  was what the last code will do.

So I take a toggle widget for testing but the principle is working also with toggle buttong.

Here example

2019-08-29_16-02-06.jpg

The JavaScript code for this :

 $scope.toggleButton = function() {
    //if  the toggle is pressed
if ( $scope.view.wdg['toggleButton-1']['pressed']==true) {
      
     window.location='app/resources/Uploaded/%5BBD-Logbuch%5D20190208-20190310.pdf'
     console.log($scope.view.wdg['file-1']['url'])
   }
//unpress the toggle button after 1,5 sec
   $timeout(function () { $scope.view.wdg['toggleButton-1']['pressed']=false;}, 1500); 
 }

 

Currently I do not know more simple method. May be, somebody could help if he knows more simple solution.

I believe there could be also a solution to use File or Hyperlink widgets and change theirs appearance (like a toggle button )via customized application styles in the class property.

View solution in original post

3 REPLIES 3

Hi @nraichura,

I understood your question - so that you want to open a pdf document when you click on a toggle - e.g. when you toggle it will open a pdf document? If this is not the correct interpretation then please, let me know.

To open a pdf document from experience we can use Hyperlink widget (to open an external link) or the File widget to load/open a file from a local project directory - e.g.  the upload folder of the project

First my idea for the implementation was to use the file or hyperlink widgets  and to emit/ simulate the click event

For Example, if we have:

 

2019-08-29_14-23-18.jpg

I used the following code to simulate the click event on both widget - to check if this will work:

 

// this funciton is called from  the click event of toggle widget
$scope.toggleLink = function() {
 //calling only toogle is set to 'on'   
   if ( $scope.view.wdg['toggle-1']['value']==true) {
     console.log("starte link");
     $scope.clickLink1();
     $scope.clickFile1();
   }  }

/////// this is log funcitons used by the click events of
//Hyperlink widget
$scope.hyperlinkclick = function() {console.log("INFO -> Hyperlink click was called")}
// click event of the File widget
$scope.filelinkclick  = function() {console.log("INFO -> File click was called")}

/////
$scope.clickLink1= function(){twx.app.fn.triggerStudioEvent(document.querySelector('[widget-id="hyperlink-1"]'), 'click');};
$scope.clickFile1= function(){twx.app.fn.triggerStudioEvent(document.querySelector('[widget-id="file-1"]'), 'click');};

 

So, when I clicked on the toggle button to set it to on I could see in the chrome debugging console that the both log function are fired for the hyperlink and for the file widget.... but still it will no open the pdf files specified by the URL. So, when I click the hyperlink or the file in the UI this work without any problems.

So, after some tests I found solution but only for local pdf's. Means when the pdf is uploaded to local project folder. Otherwise we have an permission issue

In this case we do not need additional widget (file or hyperlink widget) and could call the code only from the toggle widget - I used it the short test / but also in the toggle button:

 

// this funciton is called from  the click event of toggle widget
$scope.toggleLink = function() {
 //calling only toogle is set to 'on'   
   if ( $scope.view.wdg['toggle-1']['value']==true) {
     console.log("starte link");
   window.location=$scope.view.wdg['file-1']['url'] 
// this above set the windows location to the url property of the file widget
// but it could be an string  --> example
// window.location='Uplaoded/[BD-Logbuch]20190208-20190310.pdf' 
   }  }

2019-08-29_15-04-00.jpg 

Hi,

I need very simple solution on following workflow

 

When some one click on MSM5/6 toggle button i want xyz.pdf to be opened which i have uploaded as a file in my project.

 

I have attached image for your reference. 

 

Thank you 

OK , this  was what the last code will do.

So I take a toggle widget for testing but the principle is working also with toggle buttong.

Here example

2019-08-29_16-02-06.jpg

The JavaScript code for this :

 $scope.toggleButton = function() {
    //if  the toggle is pressed
if ( $scope.view.wdg['toggleButton-1']['pressed']==true) {
      
     window.location='app/resources/Uploaded/%5BBD-Logbuch%5D20190208-20190310.pdf'
     console.log($scope.view.wdg['file-1']['url'])
   }
//unpress the toggle button after 1,5 sec
   $timeout(function () { $scope.view.wdg['toggleButton-1']['pressed']=false;}, 1500); 
 }

 

Currently I do not know more simple method. May be, somebody could help if he knows more simple solution.

I believe there could be also a solution to use File or Hyperlink widgets and change theirs appearance (like a toggle button )via customized application styles in the class property.

Top Tags