Create Dynamic Timeline Component in React JS/TS.

SCENARIO: 

While working on one of the requirements for an Automobile sector project for a client based out of Dallas, Texas, There was a requirement to display dynamic timeline component with Expand/Collapse feature using React JS/TS.

CHALLENGE

There is no OOTB module OR component which we can utilize in React to meet this requirement. The only option is to develop custom component using JS/TS. 

. 

APPROACH

We are going to create a custom and complete dynamic timeline component with additional feature like expand and collapse in React JS/TS.

Please follow the below details steps to meet requirement.

Step 1: 

Create React JS or React TS application. We can use following commands respectively for React JS and React TS.

    npx create-react-app timeline --template typescript

    npx create-react-app timeline

Step 2:

Once you execute the above command in your terminal you will get the following structure of your React Project.

Step 3 :

After Creating the project we need to add some plugin which you can install by executing the following commands.

    npm i @fortawesome/react-fontawesome

    npm i @fortawesome/free-solid-svg-icons

Step 4:

Now, Clear the project structure and we have to add new two files named as : Timeline.tsx and App.tsx.

Step 5:

Add the following Code to the Timeline.tsx file

In the above code we have defined function interface and the state as follows:

Interface Props : In React JS we get the Props directly from the parent component but in React TS we have to pass interface and from interface we get the props functions and variables. 

here we have one object for the timeline details and one function for the callback to set the state of Parent component.

updateStatus Function : This function will take the updated status as the argument and the object of timeline. So, this function will take both as a argument and update the status of current state and call the callback function from Props to and pass updated Timeline information object.

In render method we have taken a const variable timelineData which takes values from Props and then we have a return function which returns the timeline View based on different condition. Also, We have one flag named as "isOpen" which basically show the view between expand or collapse.

Step 6 : 

Once we are done with the timeline component, we will move to main App.tsx component. 

Add the following code to the App.tsx file. We can directly move this code into Index.tsx , but we want to create a dynamic component so we are adding a new component names as App.tsx 

In this file we have defined one static state object named as "timelineDetails". It contains the information of the timeline which we want to show on the component view as well as set flag to show status and expand collapse position. 

We also have one function names as "updateRecord", It accepts data as an argument which is an object of the timelineDetails. this function is going to be called from the Timeline.tsx file means the child component. This function finds the matching object from the timelineDetails and store in "tempTimeline" and then will replace the states object with the updated one.

Step 7 : 

Now add the following css to the App.css file for the designing and the expand/collapse view.

Step 8 :

At last, now execute the code and you will get below output with look & feel.

Expand View:

Collapse View : 

Conclusion : 

This component will create the dynamic view along with look & feel as per requirement. We can use this Timeline.tsx in any component outside of this project but we have to take care about the function and its parameter. 

We can use this timeline component as independent component with the expand and collapse functionality with complete dynamic Content.

Add Customized Disclaimer message for developers before Publishing Power BI Report

Overview:

In this blog, we will talk about how we can customize a Publish message in Power BI Desktop. This tip will help us to provide a disclaimer to our end-users before they publish any reports to Power BI Service. So, now let’s get started!

1. Open your Power BI Service account.
2. Go to Admin Center.
   
3. Go to Tenant Settings and expand “Show a custom message before publishing reports”
   
4. Turn on the feature and add the following custom message. You can add any message based on your customization.
   

    #### Important Disclaimer  
    Before publishing the report to a workspace, make sure the user is a part of the workspace.  
   

   
5. Click on Apply.
6. Wait for 15-20 minutes to reflect the changes to Power BI Desktop.
7. Sign out and Sign In again to your Power BI Desktop. Now, we will be able to see customized publish messages for our Power BI Desktop.
   

   

Conclusion:

This is how we can easily customize publish messages for our Power BI Desktop. Isn’t that amazing?

If you have any questions you can reach out our SharePoint Consulting team here.

Convert Power Apps Controls to PDF without HTML (Using PDF Function)

Introduction:

We have often come across requirements to convert a control or a screen from Power Apps to PDF. Earlier, we used to generate an HTML and populate the data from Power Apps which goes to Power Automate and create a PDF file.

With this new feature of PDF Function in Power Apps, this has become much simpler.

Please follow the below steps for getting the PDF function in PowerApps:

Step 1: Go to File -> Settings

Step 2: Go to Upcoming Feature and search for PDF and enable the PDF Function toggle.

Once we have enabled the function, you will be able to use this function in your App.

Please see the below example for generating PDF from Power Apps:

Step 1: Create a Power Automate Flow with trigger Power Apps (V2) and Add an input as File.

Step 2: Add action to Create file in OneDrive for Business and add the output of the trigger to File Content

Hence, the overall flow will look like this:

 

Step 3: Go to Power Apps and add this flow on an Action Button.

Step 4: Write the below code on “OnSelect” property of the button.

GeneratePDF.Run(
    {
        file: {
            name: "test.pdf",
            contentBytes: PDF(Screen1)
        }
    }
)

Step 5: Click on the button and it should trigger the Flow.

We should have PDF File generated in the OneDrive when Flow is executed successfully.

NOTE: If you are targeting to convert a gallery control to PDF, then the time it takes to convert varies upon the number of rows in the gallery.

Conclusion:

We can now generate PDF for a specific control as well as for the whole screen without generating any HTML code and CSS issues. Hope this helps!

If you have any questions you can reach out our SharePoint Consulting team here.