We have about 10 custom home page components. I need to show one of them on pages for a custom object called "Registration".
There is a setting in the Setup/App Setup/Customize/User Interface, to "Show Custom Sidebar Components on All Pages". The problem is that it will show all 10 custom components on all pages, while I only need one displayed. Any ideas how to do that?
As a side note, this custom component consists of JavaScript that injects a custom lookup window link into the standard page layout.
How about you combine the components into one component and then use javascript inside the component to determine (based on document.location) whether to show the sub-components.
Related
I am using PrimeVUE's DataTable with filtering. I have it set to "menu", which causes a dropdown menu to appear, allowing users to fill in a query which will filter the rows based on that.
Internally, PrimeVUE uses Vue's <Teleport /> component to attach te menu to body. Generally, this is good.
However, in my specific case, I use "Single SPA", which wraps the whole app inside #single-spa-application:web-app-2.
All styling is contained inside #single-spa-application:web-app-2. So, once I click the "filter" button, no styling is applied to the dropdown menu because it's outside of the CSS scope:
Some other PrimeVUE components provide an appendTo="#single-spa-application:web-app-2" option, which works wonderfully. However, this component does not.
Is it possible to "override" any Teleports within a certain component to point somewhere else? Currently, the only way I see is to actually fork and modify their code.
I am trying to implement a Dashboard (Admin-UI) using ReactJS, but the problem is I can't set up the nested routing and components for that. I want to load the components on the same page (Home) without going to a new page, as well as loading components based on the SideNav. How to do that?
Admin-UI
A very high level way to achieve this to be:
have a home component, which contains 2 components, side nav and display screen.
declare all the controlling states in the home component and pass them as props for the 2 child components.
Use side nav to change the controlling state in home component and use those states and some conditional logic to render the components inside display screen.
Also, please add a code snippet in future. People will be able to help you better.
I am trying to create components following DRY coding principles but I am stuck with a certain use case. I have a requirement to open an expanded view of a component in a dialog box. The component shows JSON records in a list format with pagination. PFB image:
As you can see there is an expand button(top right corner) which expands the component to a dialog box and shows records in a tablular format. PFB image:
Currently I have copied all the functions and template of the base component to the dialog component to make it work but it openly violates DRY principles and also a bad practice. I also need to keep both the components in sync with each other like the filters should be passed to both the components, etc.
How about a shared service? You put your logic there and then the components are controlling how output is displayed.
Or
Parent component controls how the table component displayed in a div with the selector or if it is opened in the dialog via dialog.open(YourTableComponent,...)
I'm working on an app using Vue.js and I came across the following challenge:
The app has a pretty basic layout: a header, a main view and a navigation section at the bottom. Depending on the page the user is currently on I want to show a main action in the header. See the following wireframes:
My question now is: is there a way to "inject" the template and code into the header? Because ideally I would like to have the logic and the appearance (like an icon with label) in the corresponding component and not in the header, because it isn't aware of the current view.
The header and the main view of the components have no parent/child relation. The basic Vue.js template looks like this:
<div class="app-content">
<TheTopBar/>
<main>
<router-view></router-view>
</main>
<TheNavigationBar/>
</div>
I see two ways to do it...
Add default slot into TheTopBar template at the place you wanna see your actions
Remove TheTopBar component from your top-level component, place it inside your "main view" components templates (each of them) and define content of the slot there (actions)
Other way could be using Vue router's Named Views but that would require you to create separate "actions" component for each corresponding "main view" component
Edit
Actually there is other way. portal-vue allows exactly what you want....
The short answer is no, you cannot inject code from one component to another. You will have to have the template logic inside the header component.
However, there are a couple of things you can do.
Inside the header component you can check what the current path is with this.$route.path. And based on that display the action item. (if you are using a router)
Use a vuex store to track what the action item in the header should be. You could have the main component set the store value and header can then read it and act accordingly
I hope this answers your question.
I have an existing website composed of individual pages (each page is a different tool that requires some user input (ie forms), and each with it's own set of javascript functions to populate dropdown lists, etc on that page). Each of the tools is accessed from the main index.html.
Instead of each tool being its own "stand-alone" page that is invoked from index.html, I'd like each tool to be displayed in an iFrame instead on the main page. This way the main page remains static, while only updating the iframe with whatever tool the user selects. So say on the main index page, I have a 3 tools menu (collect logs, collect KPIs, collect status), along with an iFrame. If the user selects collect logs for example, the menu containing "collect logs" stays there, but the "collect logs" page is displayed in the iFrame.
My problem is that all the HTML content works fine, but none of the javascript code in the selected tool page works (ie none of the drop downs get populated since it's the javascript code in the page that does that by reading a file on the server).
Is there an easy way to port each tool page (html+javascript) to an iFrame without having to re-write tons of code (in my naivety I thought simply invoking the page inside an iFrame using target='' in the href would work)? Or is there a better method of accomplishing what I'm trying to do? Maybe iFrame isn't the solution.
Content in iframes remain autonomous from the wrapper app, so it makes sense that it's not working correctly. Other than building a listener for a click event associated with the div wrapped around the iframe, the iframe document isn't accessible if it points to a different origin. (See [same-origin policy]
(https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy))
To stay with simple html/css/js solution:
You can use a regular div to wrap each 'stand-alone' content and then just use whatever button/navigation target you have display that div and hide the previous by changing their css display style with the onClick event.
More invasive option:
You may want to consider using a more modular JS approach, like React JS, to build components vs pages and utilize React's structure to toggle components.
With react you can render each 'tool' when the user selects it . You would be able to utilize React component state as well to help in storing data and such for the life-cycle of the component.