Skip to main content

Notifications

Power Apps - Power Apps Pro Dev & ISV
Unanswered

How to view details

Like (0) ShareShare
ReportReport
Posted on 30 Jan 2025 02:49:45 by 20
Hello. In the power up challenge, in the model-driven app, how to make the name clickable and how to add the details?

  • Suggested answer
    VASANTH KUMAR BALMADI Profile Picture
    VASANTH KUMAR BALMADI 246 on 30 Jan 2025 at 06:15:26
    How to view details
    ### **Option 1: Make the Name Field Clickable Using a Form Customization**
     
    1. **Open the Form Editor**:
       - Go to [Power Apps](https://make.powerapps.com).
       - Navigate to **Solutions** > Open your solution > Select the table (entity) you want to customize.
       - Open the form (e.g., Main Form).
    2. **Add a Web Resource**:
       - In the form editor, add a **Web Resource** (HTML/JavaScript) to the form.
       - Use the web resource to make the Name field clickable and display details.
    3. **JavaScript Code for Clickable Name**:
       - Add the following JavaScript code to your web resource:
         ```javascript
         function makeNameClickable() {
             // Wait for the form to load
             setTimeout(function () {
                 // Get the Name field
                 var nameField = document.querySelector("div[data-id='name.fieldControl']");
                 if (nameField) {
                     // Make the Name field clickable
                     nameField.style.cursor = "pointer";
                     nameField.onclick = function () {
                         // Display details or navigate to another page
                         alert("Name clicked! Display additional details here.");
                         // Example: Open a record or show a dialog
                     };
                 }
             }, 1000); // Adjust the delay if needed
         }
         // Call the function when the form loads
         document.addEventListener("DOMContentLoaded", makeNameClickable);
         ```
    4. **Add the Web Resource to the Form**:
       - Save the JavaScript file as a web resource (e.g., `clickableName.js`).
       - Add the web resource to the form and associate it with the `OnLoad` event of the form.
    5. **Publish the Form**:
       - Save and publish the form.
    ---
     
    ### **Option 2: Display Details in a Flyout or Dialog**
    If you want to display additional details when the Name field is clicked, you can use a **Flyout** or **Dialog** in Power Apps.
    1. **Add a Subgrid or Quick View Form**:
       - Add a **Subgrid** or **Quick View Form** to display related records or details.
       - Configure the Subgrid or Quick View Form to show the relevant data.
    2. **JavaScript Code to Open a Flyout or Dialog**:
       - Modify the JavaScript code to open a Flyout or Dialog when the Name field is clicked.
         ```javascript
         function makeNameClickable() {
             setTimeout(function () {
                 var nameField = document.querySelector("div[data-id='name.fieldControl']");
                 if (nameField) {
                     nameField.style.cursor = "pointer";
                     nameField.onclick = function () {
                         // Open a Flyout or Dialog
                         Xrm.Navigation.openForm({
                             entityName: "your_entity_name", // Replace with your entity name
                             entityId: Xrm.Page.data.entity.getId(), // Current record ID
                             formType: 2, // Quick Create form
                             openInNewWindow: false
                         });
                     };
                 }
             }, 1000);
         }
         document.addEventListener("DOMContentLoaded", makeNameClickable);
         ```
    ---
     
    ### **Option 3: Use a Command Bar Button**
    If you prefer not to modify the form, you can add a **Command Bar Button** to display details.
    1. **Add a Command Bar Button**:
       - Go to the **Command Designer** for your table.
       - Add a new button to the Command Bar (e.g., "View Details").
    2. **Configure the Button**:
       - Use JavaScript or a Power Automate flow to define the action for the button.
       - Example: Open a record, display a dialog, or navigate to a related form.
    ---
     
    ### **Key Notes**:
    - **Form Context**: Use `Xrm.Page` or `formContext` to interact with the form and fields.
    - **Styling**: You can customize the appearance of the Name field using CSS in the web resource.
    - **Testing**: Test the solution thoroughly in different browsers and devices.
    Let me know if you need further assistance! 😊

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Microsoft Kickstarter Events…

Register for Microsoft Kickstarter Events…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Announcing Forum Attachment Improvements!

We're excited to announce that attachments for replies in forums and improved…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 145,666

#2
RandyHayes Profile Picture

RandyHayes 76,287

#3
Pstork1 Profile Picture

Pstork1 64,996

Leaderboard
Loading started